/* =========================================================================
   Nexus-Office · home.css  (Rework 22.07.)
   - Sticky-Stack: jede Sektion schiebt sich weich über die vorige (runde Kante).
   - Jede Sektion gleich lang: min-height 100dvh.
   - Abschnitte je eigene Welt: Hero(WebGL) / pro-minimal / verspielt-bunt / düster / prozess / CTA.
   ========================================================================= */
body.home{background:#ffffff;color:#0d0e11;font-family:'Manrope',system-ui,sans-serif;overflow-x:hidden}
.hwrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(1.2rem,5vw,3rem)}

/* Fixe Hintergrund-Ebene: der 3D-Blob bleibt hinter Hero + "Was wir bauen" */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* --- Sektionen (gleich lang, normaler Fluss, sauber weiß) --- */
.panel{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(3.5rem,8vh,7rem);overflow:hidden}
.panel__tag{position:absolute;top:clamp(1.4rem,4vh,2.4rem);left:0;width:100%}
.panel__tag .hwrap{display:flex;justify-content:space-between;align-items:center;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.p1{z-index:1}.p2{z-index:2}.p3{z-index:3}.p4{z-index:4}.p5{z-index:5}.p6{z-index:6}

.sec-eyebrow{font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:#1b3cff}
.acc{color:#1b3cff}

.kin{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.kin > span{display:inline-block;transform:translateY(115%)}
.no-js .kin > span{transform:none}

/* =============================== HERO ============================== */
.hero{background:transparent;color:#0d0e11}
.hero .hwrap{position:relative;z-index:1}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.045em;
  font-size:clamp(2.7rem,9vw,7rem);line-height:.94;margin-bottom:1.6rem}
.hero h1 .l{display:block}
.hero h1 em{font-style:italic;color:#1b3cff}
.hero__sub{max-width:42ch;font-size:clamp(1.05rem,1.7vw,1.35rem);color:#4b4e56;line-height:1.55;margin-bottom:2.2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hbtn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:1rem;padding:.9rem 1.6rem;border-radius:12px;
  transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s,color .22s,box-shadow .22s}
.hbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.hbtn--p{background:#0d0e11;color:#fff;box-shadow:0 14px 34px -14px rgba(13,14,17,.7)}
.hbtn--p:hover{background:#1b3cff;transform:translateY(-2px)}
.hbtn--p:active{transform:translateY(0) scale(.97)}
.hbtn--g{color:#0d0e11}
.hbtn--g:hover{color:#1b3cff}
.hbtn--g .arw{width:34px;height:34px;border-radius:50%;border:1.5px solid #0d0e11;display:grid;place-items:center;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.hbtn--g:hover .arw{transform:rotate(-45deg);border-color:#1b3cff}

/* =========================== LEISTUNGEN (pro-minimal, Blob bleibt dahinter) === */
.leist{background:rgba(255,255,255,.72);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);color:#0d0e11}
@media (prefers-reduced-transparency:reduce){.leist{background:#fff;backdrop-filter:none}}
.leist h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.9rem,4.5vw,3.2rem);letter-spacing:-.03em;line-height:1.03;margin:.8rem 0 0;max-width:22ch}
.leist__rows{margin-top:clamp(2rem,5vh,3.5rem);border-top:1px solid #e6e6e2}
.lrow{display:grid;grid-template-columns:.5fr 1.3fr 1fr;gap:1.5rem;align-items:center;padding:clamp(1.2rem,2.6vh,1.9rem) 0;border-bottom:1px solid #e6e6e2;transition:padding-left .35s cubic-bezier(.16,1,.3,1),background .35s}
.lrow:hover{padding-left:1rem;background:linear-gradient(90deg,#f4f6ff,transparent)}
.lrow__n{font-family:'Space Mono',monospace;color:#9a9da4;font-size:.9rem}
.lrow__t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em}
.lrow:hover .lrow__t{color:#1b3cff}
.lrow__d{color:#5b5e66;line-height:1.55;font-size:.98rem}
@media(max-width:760px){.lrow{grid-template-columns:auto 1fr;gap:.4rem 1rem}.lrow__d{grid-column:1/-1}}

/* =========================== VERSPIELT-BUNT ============================= */
.play{background:#ffd21e;color:#211708}
.play__marquee{position:absolute;top:clamp(3.5rem,9vh,5.5rem);left:0;width:200%;white-space:nowrap;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.6rem,8vw,5.5rem);
  color:#f2c200;letter-spacing:-.02em;pointer-events:none;will-change:transform}
.play .hwrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.play__lead h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.4rem,6.5vw,5rem);line-height:.96;letter-spacing:-.02em;max-width:14ch}
.play__lead h2 span{color:#e4141b}
.play__lead p{max-width:40ch;font-size:1.12rem;line-height:1.55;color:#4a3410;margin-top:1.1rem;font-weight:500}
.play__pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.play__pills a{background:#211708;color:#ffd21e;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;padding:.7rem 1.3rem;border-radius:999px;font-size:1rem;
  transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s}
.play__pills a:hover{background:#e4141b;color:#fff;transform:translateY(-3px) rotate(-2deg)}
.play__pills a:nth-child(2n):hover{transform:translateY(-3px) rotate(2deg)}
/* Karten (das "was fehlt") */
.play__cards{display:grid;gap:1rem}
.pcardy{background:#fff;border-radius:20px;padding:1.4rem 1.5rem;display:flex;align-items:center;gap:1.1rem;
  box-shadow:0 12px 30px -18px rgba(120,80,0,.5);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.pcardy:hover{transform:translateY(-4px) rotate(-1deg)}
.pcardy:nth-child(2n):hover{transform:translateY(-4px) rotate(1deg)}
.pcardy__ic{width:52px;height:52px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center}
.pcardy__ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2}
.pcardy b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.15rem;display:block}
.pcardy span{font-size:.9rem;color:#6b5a30}
@media(max-width:820px){.play .hwrap{grid-template-columns:1fr}.play__cards{margin-top:.4rem}}

/* =========================== DÜSTER (Katalog) ========================== */
.dark{background:#0b0c0e;color:#f3f2ef}
.dark__head{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:flex-end}
.dark h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(2rem,6vw,4rem);letter-spacing:-.03em;line-height:1;max-width:18ch}
.dark .sec-eyebrow{color:#c8ff4d}
.dark__link{color:#f3f2ef;border:1px solid #2a2d33;padding:.7rem 1.3rem;border-radius:999px;font-weight:600;font-size:.95rem;display:inline-flex;gap:.5rem;align-items:center;transition:border-color .3s,color .3s,transform .2s}
.dark__link:hover{border-color:#c8ff4d;color:#c8ff4d;transform:translateY(-2px)}
.dark__grid{margin-top:clamp(2rem,5vh,3rem);display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
.dtile{position:relative;border-radius:16px;overflow:hidden;min-height:clamp(180px,26vh,240px);display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;border:1px solid #1c1f24;isolation:isolate;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.dtile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g);opacity:.92;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.dtile:hover{transform:translateY(-6px)}
.dtile:hover::before{transform:scale(1.08)}
.dtile b{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:600}
.dtile span{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.dtile--tall{grid-row:span 2}
@media(max-width:900px){.dark__grid{grid-template-columns:repeat(2,1fr)}.dtile--tall{grid-row:auto}}

/* =========================== PROZESS =================================== */
.proc{background:#ffffff;color:#0d0e11}
.proc h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:-.03em;margin-top:.8rem}
.proc__grid{margin-top:clamp(2rem,5vh,3rem);display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
.pcard{background:#fff;border:1px solid #e6e6e2;border-radius:18px;padding:1.6rem 1.4rem;position:relative;min-height:210px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.pcard:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(0,0,0,.3)}
.pcard__n{font-family:'Space Mono',monospace;color:#1b3cff;font-size:.85rem}
.pcard h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.35rem;margin:.7rem 0 .5rem}
.pcard p{color:#5b5e66;font-size:.94rem;line-height:1.5}
@media(max-width:900px){.proc__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proc__grid{grid-template-columns:1fr}}

/* =========================== CTA ====================================== */
.cta{background:#1b3cff;color:#fff;text-align:center;align-items:center}
.cta h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(2.2rem,7vw,5rem);letter-spacing:-.03em;line-height:1;margin-bottom:1.2rem}
.cta p{max-width:44ch;margin:0 auto 2.2rem;color:#d6ddff;font-size:1.15rem;line-height:1.5}
.cta a{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:#1b3cff;font-weight:700;font-size:1.05rem;padding:1rem 2rem;border-radius:12px;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.cta a:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.cta a:active{transform:translateY(0) scale(.98)}
.cta a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}

/* Startseite bewusst immer HELL/WEISS (Jans Wunsch) — kein Dark-Mode-Umschalten. */