/* NEXUS Kontakt – Erweiterungen (ctx): X-Marke im Hero, dunkler Anfrage-Abschnitt mit Live-Vorschau, heller Abschluss */
:root{--ctx-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- 1) Hero: NEXUS-Karte mit X-Marke ---------- */
.ct-person-mini{grid-template-columns:76px minmax(0,1fr);gap:6px 18px;bottom:44px}
.ct-pm-text{grid-column:2}
.ct-arrived{grid-column:2}
.ctx-mark{grid-column:1;grid-row:1/span 2;position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:20px;
  background:radial-gradient(circle at 50% 50%,rgba(58,140,255,.22),rgba(13,26,43,0) 70%),linear-gradient(150deg,#12233A,#0A1523);
  border:1px solid rgba(156,203,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .5s,box-shadow .5s}
.ctx-mark svg{width:58px;height:58px;overflow:visible}
.ctx-sh polygon{fill:rgba(255,255,255,.12);stroke:rgba(220,235,255,.55);stroke-width:5;stroke-linejoin:round;transition:fill .6s,stroke .6s}
.ctx-sh{transition:transform .7s var(--ctx-ease)}
.ctx-core{fill:url(#ctxBlue)}
.ctx-glow{fill:#3A8CFF;opacity:.35;transition:opacity .6s}
.ctx-node{fill:#fff;transform-box:fill-box;transform-origin:center;transition:fill .4s,transform .4s var(--ctx-ease)}
.ctx-ring{fill:none;stroke:#F2C572;stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center}
.ct-stage.is-flying .ctx-sh-a{transform:translate(-26px,-26px)}
.ct-stage.is-flying .ctx-sh-b{transform:translate(26px,26px)}
.ct-stage.is-arrived .ctx-mark{border-color:rgba(242,197,114,.7);box-shadow:0 0 0 5px rgba(242,197,114,.12),0 0 34px rgba(58,140,255,.35)}
.ct-stage.is-arrived .ctx-sh polygon{fill:rgba(156,203,255,.3);stroke:#fff}
.ct-stage.is-arrived .ctx-glow{opacity:.95}
.ct-stage.is-arrived .ctx-node{fill:#F2C572;transform:scale(1.25)}
.ct-stage.is-arrived .ctx-ring{animation:ctxRing 1.6s ease-out 1 both}
.ct-stage.is-replied .ctx-ring{animation:ctxRing 1.6s ease-out 1 both,ctxRing 2.8s ease-out 1.8s infinite}
@keyframes ctxRing{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
/* Antwort klappt auf statt leerer Fläche */
.ct-reply{max-height:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;transition:max-height .5s var(--ctx-ease),margin .5s var(--ctx-ease),padding .5s var(--ctx-ease),opacity .45s,transform .45s}
.ct-stage.is-replied .ct-reply{max-height:140px;margin-top:12px;padding-top:11px;padding-bottom:11px;border-width:1px}
/* Flieger trifft den Knotenpunkt */
.ct-plane{box-shadow:0 0 24px rgba(242,197,114,.8),0 0 60px rgba(58,140,255,.35)}

/* ---------- 2) Anfrage-Abschnitt dunkel ---------- */
.ctx-dark{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:radial-gradient(ellipse at 12% 18%,rgba(10,108,240,.2),transparent 45%),radial-gradient(ellipse at 88% 90%,rgba(242,197,114,.08),transparent 40%),linear-gradient(160deg,#0D1A2B,#0A1523)}
.ctx-dark .eyebrow{color:#9CCBFF}
.ctx-dark h2{color:#fff}
.ctx-dark h2 em{color:#83B8FF}
.ctx-dark .ct-form-copy .ct-body{color:#B8C8DA}
.ctx-dark .ct-form-copy .ct-body strong{color:#fff}
.ctx-dark .ct-form-copy>.ct-note{color:#8DA6C3}
.ctx-dark .ct-ready{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.ctx-dark .ct-ready strong{color:#fff}
.ctx-dark .ct-ready span{color:#AFBDCD}
.ctx-dark .ct-ring-bg{stroke:rgba(255,255,255,.12)}
.ctx-dark .ct-ring-fill{stroke:#3A8CFF}
.ctx-dark .ct-ready.is-done .ct-ring-fill{stroke:#35C78A}
.ctx-dark .ct-form-card{border-color:rgba(255,255,255,.1);box-shadow:0 50px 100px rgba(0,0,0,.45);color:var(--tinte)}
.ctx-dark .ct-form-card.is-flash{box-shadow:0 0 0 4px rgba(58,140,255,.45),0 50px 100px rgba(0,0,0,.45)}

/* Live-Vorschau: die eigene Nachricht entsteht mit */
.ctx-pv{position:relative;margin-top:18px;padding:18px 18px 16px;border-radius:18px;background:#F7FAFE;color:var(--tinte);box-shadow:0 26px 60px rgba(0,0,0,.4);transform:rotate(-1.5deg);transition:transform .6s var(--ctx-ease),box-shadow .5s,opacity .5s}
.ctx-pv-top{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #E3EAF2}
.ctx-pv-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#EAF2FE}
.ctx-pv-ic svg,.ctx-pv-send svg{width:19px;height:19px;fill:none;stroke:var(--blau);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ctx-pv-who{flex:1;min-width:0}
.ctx-pv-who strong,.ctx-pv-who small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-pv-who strong{font-size:.98rem;min-height:1.3em}
.ctx-pv-who small{font-size:.8rem;color:var(--schiefer);min-height:1.25em}
.ctx-pv-text{margin:12px 0 0;min-height:66px;font-size:.9rem;line-height:1.55;color:#33475E;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ctx-pv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.ctx-pv-chip{display:inline-flex;align-items:center;min-height:26px;padding:4px 11px;border-radius:999px;background:#EAF2FE;color:#0A5BD0;font-size:.78rem;font-weight:650;transition:background .3s}
.ctx-pv-send{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#E3EAF2;transition:background .4s}
.ctx-pv-send svg{stroke:#8A9BB0;transition:stroke .4s}
.ctx-sk{display:block;height:9px;margin:6px 0;border-radius:6px;background:linear-gradient(90deg,#E6ECF3,#F1F5F9,#E6ECF3);background-size:200% 100%;animation:ctxSk 2.2s linear infinite}
.ctx-pv-who .ctx-sk{margin:4px 0}
.ctx-pv-chip .ctx-sk{margin:0;height:8px;background:#C9DDF8}
.ctx-pv-chip:has(.ctx-sk){background:#F1F5F9}
.ctx-pv-ok{position:absolute;right:-12px;top:-12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#35C78A;box-shadow:0 8px 20px rgba(53,199,138,.45);transform:scale(0);transition:transform .45s var(--ctx-ease)}
.ctx-pv-ok svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ctx-pv.is-ready .ctx-pv-send{background:var(--blau)}
.ctx-pv.is-ready .ctx-pv-send svg{stroke:#fff}
.ctx-pv.is-ready{box-shadow:0 0 0 3px rgba(53,199,138,.35),0 26px 60px rgba(0,0,0,.4)}
.ctx-pv.is-ready .ctx-pv-ok{transform:scale(1)}
.ctx-pv.is-sent{transform:rotate(0) translate(40px,-26px) scale(.96);opacity:.35}
.ctx-pv.is-type .ctx-pv-text{animation:ctxType .35s ease}
@keyframes ctxSk{to{background-position:-200% 0}}
@keyframes ctxType{from{opacity:.55}to{opacity:1}}

/* ---------- 3) Abschluss hell ---------- */
.ctx-light{position:relative;overflow:hidden;background:var(--porzellan,#F3F5F8);color:var(--tinte)}
.ctx-light .ct-eyebrow{color:var(--blau)}
.ctx-light h2{color:var(--tinte)}
.ctx-light h2 em{color:var(--blau)}
.ctx-light .ct-on-dark{color:var(--schiefer)}
.ctx-light::after{content:"";position:absolute;right:-140px;top:50%;width:440px;height:440px;transform:translateY(-50%);pointer-events:none;opacity:.07;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='560 -20 560 540'%3E%3Cpolygon points='657,94 783,93 869,180 806,239' fill='none' stroke='%230A6CF0' stroke-width='6'/%3E%3Cpolygon points='871,317 930,264 1084,418 964,418' fill='none' stroke='%230A6CF0' stroke-width='6'/%3E%3Cpolygon points='1101,2 996,172 754,400 577,487 860,213' fill='%230A6CF0'/%3E%3C/svg%3E")}
.ctx-light .container{position:relative;z-index:1}

@media(max-width:960px){
  .ct-form-copy{position:static}
  .ctx-pv{max-width:460px}
}
@media(max-width:620px){
  .ct-person-mini{grid-template-columns:58px minmax(0,1fr);gap:6px 14px}
  .ctx-mark{width:58px;height:58px;border-radius:16px}
  .ctx-mark svg{width:44px;height:44px}
  .ctx-light::after{width:260px;height:260px;right:-90px;top:auto;bottom:-60px;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .ctx-mark *,.ctx-pv,.ctx-pv *,.ct-reply{transition:none!important;animation:none!important}
  .ctx-sk{animation:none!important}
}
@media(max-width:960px){.ctx-pv{display:none}}
@media(max-width:440px){.ct-tabs button{padding:10px 4px;font-size:.88rem;hyphens:none}.ct-form-head{gap:10px}}