/* Abschnitt 7 „Erstgespräch“: dasselbe 3D-Quartier wie im Hero, jetzt am Abend (abend.js).
   3D (data-m="gl"): der Abschnitt ist etwa 210 vh hoch, die Bühne bleibt per CSS sticky stehen (keine JS-Pins) und
   abend.js spielt Licht, Haus und Auto mit dem Scrollfortschritt ab.
   Standbild (data-m="still": ohne WebGL oder bei „Bewegung reduzieren“, auf schwachen Handys): eine Bildschirmhöhe
   mit abend.webp / abend-m.webp. Ohne JS: dasselbe Standbild über <noscript>.
   Text und Knopf liegen in beiden Fällen groß und mittig im Abendhimmel. Der Faden aus ende.js kommt von oben herein
   und endet am Schild „Ihr Projekt“ (.kt-faden, .kt-tag; Lage setzt abend.js). */

.kt{--gut:clamp(20px,5.2vw,84px);--sky-top:#aab3e3;--faden-abend:#5a62a8;--kt-band:clamp(120px,22vh,240px);position:relative;z-index:2;background:#fff}
/* Übergang aus „Über uns“ in den Abendhimmel; liegt unter dem Faden (ende.js) und unter Film und Text von .ue */
.kt::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--kt-band);pointer-events:none;
  background:linear-gradient(rgba(170,179,227,0),rgba(170,179,227,.22) 40%,rgba(170,179,227,.7) 78%,var(--sky-top))}
.kt[data-m="gl"]{height:210vh;height:210svh;min-height:1100px}

.kt-stage{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1240px;overflow:hidden;isolation:isolate;
  background:linear-gradient(0deg,#fff3e6 0%,#ffd8b0 36%,#f8c8c4 60%,#d6c6e8 80%,var(--sky-top) 100%)}
.kt[data-m="gl"] .kt-stage{position:sticky;top:0}
.kt-scene{position:absolute;inset:0}
.kt-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease;outline:none;touch-action:pan-y}
.kt.ready .kt-gl{opacity:1}
.kt-still{position:absolute;inset:0;display:none}
.kt-still img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.kt.still-on .kt-still,.kt-still.kt-ns{display:block}
.kt.still-on .kt-gl{display:none}
/* ?bild=1: nur die Szene im Endzustand (so entstehen abend.webp und abend-m.webp) */
.kt.bild .kt-text,.kt.bild .kt-tag,.kt.bild .kt-faden,.kt.bild .kt-stage::after{display:none}
/* weicher Auslauf in den Fuß */
.kt-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8%;z-index:3;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.82) 70%,#fff)}

/* Faden: Fortsetzung aus „Über uns“ bis zum Schild (Indigo mit hellem Saum: sichtbar auf Himmel und Stadt) */
.kt-faden{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
.kt-faden .kt-fd{stroke:var(--faden-abend);filter:drop-shadow(0 0 1.5px rgba(255,246,236,.85))}

/* Schild „Ihr Projekt“: wie die Schilder im Hero (.tag in index.html), hier nur zum Ansehen */
.kt-tag{z-index:2;pointer-events:none;cursor:default;opacity:0;transition:opacity .5s ease}
.kt-tag.on{opacity:1}
.kt-tag .pill{font-size:14px;padding:9px 15px 9px 11px}
.kt-tag.hit .pill{animation:bump .7s var(--ease)}
.kt-tag.done .dot{background:var(--g)}

/* Text und Knopf groß und mittig im Abendhimmel */
.kt-text{position:absolute;z-index:4;left:0;right:0;top:clamp(56px,10.5vh,130px);padding:0 var(--gut);text-align:center;pointer-events:none}
.kt-text a{pointer-events:auto}
/* weicher Schleier in Himmelsfarbe hinter dem Text: die Stadt läuft dort im Dunst aus, der Text bleibt gut lesbar */
.kt-text::before{content:"";position:absolute;z-index:-1;left:50%;top:-70px;width:min(1500px,100%);height:calc(100% + 150px);transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(234,214,234,.7),rgba(234,214,234,.5) 50%,rgba(234,214,234,0));pointer-events:none}
.kt-kick{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#1a2c66}
.kt-text h2{margin:0 auto;max-width:14.5em;font-size:clamp(40px,4.6vw,70px);font-weight:600;line-height:1.04;letter-spacing:.002em;text-wrap:balance;color:var(--ink)}
.kt-sub{margin:18px 0 0;font-size:19px;line-height:1.5;color:#1f2c45}
.kt-btn{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:18px 30px 18px 34px;border-radius:999px;background:var(--blue);color:#fff;
  text-decoration:none;font-weight:600;font-size:17.5px;line-height:1.2;letter-spacing:.01em;
  box-shadow:0 14px 30px -12px rgba(31,70,190,.75),0 0 0 1px rgba(255,255,255,.18);transition:transform .2s,box-shadow .2s}
.kt-btn svg{width:12px;height:12px;flex:none}
.kt-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px -12px rgba(31,70,190,.85),0 0 0 1px rgba(255,255,255,.22)}
.kt-btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* sobald das Haus fertig ist, meldet sich der Knopf einmal sanft */
.kt.fertig .kt-btn{animation:kt-ping 1.8s ease-out .2s 1}
@keyframes kt-ping{0%{box-shadow:0 14px 30px -12px rgba(31,70,190,.75),0 0 0 0 rgba(255,255,255,.75)}
  100%{box-shadow:0 14px 30px -12px rgba(31,70,190,.75),0 0 0 16px rgba(255,255,255,0)}}

/* ---------- Schmal ---------- */
@media (max-width:899px){
  .kt-stage::after{height:13%}
  .kt-text{top:clamp(44px,8.5vh,96px)}
  .kt-kick{font-size:11px;letter-spacing:.14em;margin-bottom:10px}
  .kt-text h2{font-size:clamp(32px,9vw,46px);max-width:10.5em}
  .kt-sub{font-size:16.5px;margin-top:12px}
  .kt-btn{margin-top:22px;padding:16px 24px 16px 28px;font-size:16px}
  .kt-tag .pill{font-size:12.5px;padding:7px 12px 7px 9px;gap:6px}
  .kt-tag .stem{height:13px}
}
@media (max-width:899px) and (max-height:700px){
  .kt-text h2{font-size:30px}
  .kt-btn{margin-top:16px;padding:13px 22px 13px 24px}
}
@media (prefers-reduced-motion:reduce){
  .kt *{transition:none!important;animation:none!important}
}