/* =========================================================================
   SIGNAL — INconnect GmbH · immersive one-pager
   Art direction: near-black navy · electric cyan + fiber blue glow ·
   teal brand accent · warm signal accent
   ========================================================================= */

:root{
  --bg:      #05070d;
  --bg-2:    #0a1320;
  --blue:    #2781bc;   /* INconnect brand blue */
  --blue-hi: #5cb4ec;   /* brighter highlight for glow/bloom */
  --gray:    #8d8d8b;   /* molecule gray */
  --cyan:    #5cb4ec;   /* alias → bright blue accent */
  --teal:    #2781bc;   /* alias → brand blue */
  --warm:    #ff8f4a;   /* emotional amber accent */
  --warm-hi: #ffc070;   /* warm gold highlight */
  --ink:     #eef4ff;
  --muted:   #93a6c2;
  --faint:   #5d6f8c;
  --line:    rgba(120,165,215,.16);
  --line-2:  rgba(120,165,215,.08);
  --glass:   rgba(10,16,28,.42);

  --ff-disp: "Archivo", "Arial Narrow", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-disp);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (max-width:820px){ body{ cursor:auto; } }

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--cyan); color:#021018; }

/* ---- fixed WebGL canvas ---- */
#webgl{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; display:block;
}

/* ---- grain + vignette overlays ---- */
.grain{
  position:fixed; inset:-50%; z-index:6; pointer-events:none;
  width:200%; height:200%; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)}
  40%{transform:translate(3%,-3%)} 60%{transform:translate(-2%,4%)}
  80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)}
}
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(2,4,9,.55) 100%);
}

/* ---- custom cursor ---- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:95; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:9px; height:9px; background:#fff;
  box-shadow:0 0 0 2px rgba(5,10,20,.6), 0 0 12px 1px rgba(92,180,236,.95); }
.cursor-ring{
  width:34px; height:34px; border:1.5px solid var(--blue-hi);
  box-shadow:0 0 0 1px rgba(5,10,20,.5), 0 0 16px rgba(39,129,188,.4) inset;
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s;
}
.cursor-hover .cursor-ring{ width:60px; height:60px; border-color:#fff; }
.cursor-hover .cursor-dot{ background:var(--blue-hi); }
@media (max-width:820px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---- preloader ---- */
.preloader{
  position:fixed; inset:0; z-index:100; background:#04060b;
  display:flex; align-items:center; justify-content:center;
}
.pre-inner{ width:min(560px,82vw); text-align:left; }
.pre-mark{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--faint); margin-bottom:22px;
}
.pre-num{
  font-weight:800; font-size:clamp(64px,13vw,150px); line-height:.9;
  letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pre-num b{ color:var(--cyan); font-weight:800; }
.pre-bar{
  margin-top:26px; height:2px; width:100%; background:var(--line-2);
  overflow:hidden;
}
.pre-bar span{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.pre-label{
  margin-top:16px; font-family:var(--ff-mono); font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
  display:flex; justify-content:space-between;
}

/* ---- navigation ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,54px);
  transition:transform .6s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav--solid{
  background:linear-gradient(180deg, rgba(5,7,13,.72), rgba(5,7,13,0));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-color:var(--line-2);
}
.nav--hidden{ transform:translateY(-110%); }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  position:relative; padding:4px 0; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--cyan); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink);
  border:1px solid var(--line); padding:10px 18px; border-radius:100px;
  transition:border-color .3s, background .3s;
}
.nav-cta:hover{ border-color:var(--cyan); background:rgba(47,233,255,.08); }
.nav-right{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); }
.nav-social{ display:flex; align-items:center; gap:14px; }
.nav-social a{
  display:flex; color:var(--muted);
  transition:color .3s, transform .35s var(--ease);
}
.nav-social a:hover{ color:var(--cyan); transform:translateY(-2px); }
.nav-social svg{ width:18px; height:18px; display:block; fill:currentColor; }
@media (max-width:820px){ .nav-links{ display:none; } }
@media (max-width:420px){ .nav-social{ gap:11px; } .nav-social svg{ width:17px; height:17px; } }

/* ---- logo (real INconnect mark) ---- */
.logo{ display:flex; align-items:center; }
.logo-svg{ height:27px; width:auto; display:block; }
/* Logo on the dark site: rendered completely white (fully visible).
   The original brand colours (#2781BC / #444444 / #8D8D8B) are kept in
   inconnect-logo.svg for use on light surfaces. */
.lg-blue, .lg-ink, .lg-gray, .lg-light{ fill:#ffffff; }
.foot-brand .logo-svg{ height:34px; }

/* ---- generic layout ---- */
main{ position:relative; z-index:2; }
.section{ position:relative; padding:0 clamp(20px,5vw,90px); }
.wrap{ max-width:1320px; margin:0 auto; width:100%; }
.kicker{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{ content:""; width:30px; height:1px; background:var(--cyan); opacity:.7; }
.eyebrow-i{ color:var(--faint); }

h1,h2,h3{ font-weight:800; letter-spacing:-.025em; line-height:.96; text-wrap:balance; }
.section h2{ text-shadow:0 2px 34px rgba(3,6,14,.5); }
.display{
  font-size:clamp(40px,8.4vw,150px); font-weight:800;
  text-transform:uppercase; letter-spacing:-.03em; line-height:.9;
}
.lead{ color:var(--muted); font-size:clamp(16px,1.5vw,21px); max-width:54ch;
  line-height:1.6; text-wrap:pretty; }

/* char mask reveal */
/* padding-bottom enlarges the clip box so descenders (g, y, p) aren't cut;
   the equal negative margin keeps the line spacing of line-height:.9 unchanged */
.char-mask{ display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.2em; margin-bottom:-.2em; }
.char{ display:inline-block; will-change:transform; }
.split-word{ display:inline-block; vertical-align:top; white-space:nowrap; }

/* long German compound words: hyphenate instead of breaking ugly */
.serv-card h3, .loc-card h3, .pstep h3{
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }

/* team photo slot (Werte · Teamgeist) */
.werte-item--photo{ position:relative; overflow:hidden; padding:0; }
.werte-photo{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.werte-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,8,15,.35) 0%, rgba(5,8,15,.55) 55%, rgba(5,8,15,.9) 100%); }
.werte-body{ position:relative; z-index:2; padding:42px 30px 50px; pointer-events:none; }
.werte-body h3{ margin-bottom:18px; }

/* ---- HERO ---- */
#hero{ min-height:100svh; display:flex; align-items:center;
  padding-top:120px; padding-bottom:70px; }
.hero{ display:flex; flex-direction:column; justify-content:center; width:100%; }
.hero-kicker{ margin-bottom:26px; }
.hero h1{ font-size:clamp(34px,6.9vw,112px); margin-bottom:0;
  text-shadow:0 6px 50px rgba(2,5,12,.55); }
.hero h1 .accent{ color:var(--cyan); }
.hero-foot{ display:flex; gap:48px; align-items:flex-end; flex-wrap:wrap;
  margin-top:clamp(34px,6vh,70px); }
.hero .lead{ color:#b6c6de; text-shadow:0 2px 22px rgba(2,5,12,.8); }
.hero-scroll{ display:flex; align-items:center; gap:14px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--faint); }
.hero-scroll i{ width:1px; height:46px; background:linear-gradient(var(--cyan),transparent);
  display:block; position:relative; overflow:hidden; }
.hero-scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%;
  height:50%; background:var(--cyan); animation:scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot{ to{ transform:translateY(300%); } }

/* ---- section header ---- */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,64px); }
.sec-head .idx{ font-family:var(--ff-mono); font-size:12px; color:var(--faint);
  letter-spacing:.2em; }

/* ---- STANDORTE ---- */
#standorte{ min-height:170vh; padding-top:14vh; }
.standorte-head{ max-width:760px; }
.standorte-head h2{ font-size:clamp(34px,5.4vw,82px); margin:22px 0 24px; }
.loc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:clamp(40px,8vw,90px); }
.loc-card{
  border:1px solid var(--line); border-radius:14px; padding:24px 22px;
  background:var(--glass); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  min-height:230px; display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .4s, transform .5s var(--ease), background .4s;
}
.loc-card:hover{ border-color:rgba(47,233,255,.4); transform:translateY(-6px);
  background:rgba(13,22,42,.6); }
.loc-card .dot{ width:9px; height:9px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 14px var(--cyan); margin-bottom:auto; }
.loc-card h3{ font-size:23px; font-weight:800; margin:18px 0 4px; }
.loc-card .reg{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:12px; }
.loc-card p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.loc-card .yr{ font-family:var(--ff-mono); font-size:11px; color:var(--faint);
  margin-top:14px; letter-spacing:.1em; }
@media (max-width:980px){ .loc-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .loc-cards{ grid-template-columns:1fr; } }

/* node labels overlay */
.node-layer{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.node-label{
  position:absolute; top:0; left:0; opacity:0; will-change:transform,opacity;
  transition:opacity .5s; transform:translate(-50%,-50%);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
}
.node-label .nl-line{ width:1px; height:30px; margin:0 auto 8px;
  background:linear-gradient(var(--cyan),transparent); }
.node-label .nl-name{ color:var(--ink); }
.node-label .nl-reg{ color:var(--cyan); font-size:9.5px; margin-top:3px; }

/* ---- LEISTUNGEN (pinned scrollytelling) ---- */
.serv{ position:relative; }
.serv-pin{ height:100svh; overflow:hidden; }
.serv-inner{ position:relative; height:100%; padding:0 clamp(20px,5vw,90px); }
.serv-head{ position:absolute; top:13vh; left:clamp(20px,5vw,90px); }
.serv-head h2{ font-size:clamp(32px,5vw,76px); margin-top:14px; text-transform:none; }
.serv-bigidx{ position:absolute; left:clamp(20px,5vw,90px); top:50%; transform:translateY(-50%);
  font-weight:900; font-size:clamp(120px,26vw,360px); line-height:.8; color:transparent;
  -webkit-text-stroke:1px rgba(120,165,215,.16); letter-spacing:-.04em; pointer-events:none;
  font-variant-numeric:tabular-nums; }
.serv-cards{ position:absolute; right:clamp(20px,5vw,90px); top:50%; transform:translateY(-50%);
  width:min(440px,44vw); height:430px; }
.serv-card{ position:absolute; inset:0; opacity:0; transform:translateY(42px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none;
  border:1px solid var(--line); border-radius:18px; padding:32px 32px 34px;
  background:linear-gradient(165deg, rgba(13,21,36,.72), rgba(6,10,18,.5));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.serv-card.is-active{ opacity:1; transform:none; pointer-events:auto; }
.serv-cap{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-hi); display:flex; gap:10px; align-items:center; }
.serv-cap::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--blue-hi);
  box-shadow:0 0 14px var(--blue-hi); }
.serv-card .num{ font-family:var(--ff-mono); font-size:12px; color:var(--blue-hi);
  letter-spacing:.2em; margin-top:26px; }
.serv-card h3{ font-size:clamp(28px,3.1vw,44px); margin:10px 0 16px; line-height:1; }
.serv-card p{ font-size:15px; color:var(--muted); line-height:1.62; }
.serv-tags{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:22px; }
.serv-tags li{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:6px 12px; }
.serv-steps{ position:absolute; bottom:13vh; left:clamp(20px,5vw,90px); display:flex; gap:10px; }
.serv-steps .ss{ width:30px; height:3px; border-radius:3px; background:var(--line-2);
  transition:background .4s var(--ease), width .4s var(--ease); }
.serv-steps .ss.is-on{ background:var(--blue-hi); width:54px; }
@media (max-width:820px){
  .serv-bigidx{ display:none; }
  .serv-head{ position:absolute; top:9vh; }
  .serv-cards{ position:absolute; left:clamp(20px,5vw,90px); right:clamp(20px,5vw,90px);
    width:auto; bottom:12vh; top:auto; transform:none; height:auto; min-height:340px; }
  .serv-card{ position:absolute; }
}

/* ---- PROZESSE (multi-track · pinned horizontal · themed) ---- */
.ptrack{ position:relative; --accent:var(--blue-hi); }
.ptrack[data-theme="blue"]{   --accent:#5cb4ec; }
.ptrack[data-theme="green"]{  --accent:#3fdc92; }
.ptrack[data-theme="yellow"]{ --accent:#ffce5a; }
.ptrack-pin{ height:100svh; overflow:hidden; display:flex; flex-direction:column;
  justify-content:center; }
.ptrack-top{ padding:0 clamp(20px,5vw,90px); margin-bottom:clamp(28px,4vw,48px); }
.ptabs{ display:flex; gap:8px; margin-bottom:30px; flex-wrap:wrap; }
.ptab{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  transition:color .3s, border-color .3s, background .3s; }
.ptab:hover{ color:var(--ink); border-color:var(--accent); }
.ptab.is-active{ color:#04101a; background:var(--accent); border-color:var(--accent); font-weight:500; }
.ptrack[data-theme="blue"]   .ptab.is-active{ color:#04101a; }
.ptrack[data-theme="green"]  .ptab.is-active{ color:#03130b; }
.ptrack[data-theme="yellow"] .ptab.is-active{ color:#1a1305; }
.ptrack-headline{ display:flex; flex-direction:column; gap:14px; max-width:1000px; }
.ptrack-eyebrow{ color:var(--accent); }
.ptrack-eyebrow::before{ background:var(--accent); opacity:.8; }
.ptrack-title{ font-size:clamp(30px,4.8vw,72px); line-height:.98; text-transform:none;
  letter-spacing:-.025em; text-wrap:balance; }
.pprogress{ width:min(300px,46vw); height:2px; background:var(--line-2); position:relative;
  margin-top:26px; }
.pprogress span{ position:absolute; inset:0; left:0; width:12%;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 45%, transparent), var(--accent));
  transition:width .25s var(--ease); }
.ptrack-rail{ display:flex; gap:clamp(34px,5vw,90px); padding:0 clamp(20px,5vw,90px);
  will-change:transform; align-items:stretch; }
.pstep{ flex:0 0 auto; width:min(420px,80vw); position:relative; padding:34px 32px 36px;
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(165deg, rgba(12,18,30,.5), rgba(6,10,18,.32));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:.4; transform:translateY(14px); transition:opacity .5s var(--ease),
  transform .5s var(--ease), border-color .5s; display:flex; flex-direction:column;
  align-items:flex-start; gap:0; }
.pstep.is-on{ opacity:1; transform:none; border-color:color-mix(in oklab, var(--accent) 40%, var(--line)); }
.pstep .pnum{ font-family:var(--ff-mono); font-size:13px; color:var(--accent);
  letter-spacing:.1em; }
.pstep .ph{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin:18px 0 12px; display:block; }
.pstep h3{ font-size:clamp(25px,2.3vw,36px); margin:0 0 14px; line-height:1.06;
  letter-spacing:-.02em; text-wrap:balance; }
.pstep p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0; }
.pstep--end{ background:linear-gradient(165deg,
  color-mix(in oklab, var(--accent) 16%, rgba(10,16,28,.6)), rgba(6,10,18,.4)); }
.pstep--end h3{ color:var(--accent); }

/* ---- WERTE ---- */
#werte{ min-height:84vh; padding-top:12vh; }
.werte-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:32px; border-top:1px solid var(--line); }
.werte-item{ padding:32px 28px 36px; border-left:1px solid var(--line);
  position:relative; }
.werte-item:first-child{ border-left:none; }
.werte-item .wn{ font-family:var(--ff-mono); font-size:12px; color:var(--cyan);
  letter-spacing:.2em; }
.werte-item h3{ font-size:clamp(30px,3.6vw,52px); margin:26px 0 18px; }
.werte-item p{ font-size:14.5px; color:var(--muted); line-height:1.62; }
@media (max-width:820px){ .werte-grid{ grid-template-columns:1fr; }
  .werte-item{ border-left:none; border-top:1px solid var(--line); }
  .werte-item:first-child{ border-top:none; } }

/* ---- KARRIERE CTA ---- */
#karriere{ min-height:118vh; display:flex; align-items:center; justify-content:center;
  text-align:center; }
.cta-inner{ max-width:1120px; }
.cta-inner h2{ font-size:clamp(40px,7.6vw,120px); text-transform:uppercase;
  line-height:.92; margin:26px 0 44px; }
.cta-inner h2 .accent{ color:var(--cyan); }
.magnetic{ display:inline-block; will-change:transform; }
.btn-signal{
  position:relative; display:inline-flex; align-items:center; gap:16px;
  padding:24px 46px; border-radius:100px; font-weight:700; font-size:18px;
  letter-spacing:.01em; color:#02121a; border:none; cursor:none;
  background:linear-gradient(120deg,var(--cyan),var(--teal));
  box-shadow:0 0 40px rgba(47,233,255,.4), 0 0 0 1px rgba(47,233,255,.5) inset;
}
.btn-signal .arrow{ transition:transform .4s var(--ease); }
.magnetic:hover .arrow{ transform:translateX(6px); }
.cta-sub{ margin-top:34px; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

/* ---- FOOTER ---- */
#footer{ position:relative; z-index:2;
  padding:clamp(60px,8vw,120px) clamp(20px,5vw,90px) 40px;
  background:linear-gradient(180deg,transparent,rgba(4,7,14,.85)); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  margin-bottom:70px; }
.foot-brand .logo{ margin-bottom:22px; }
.foot-brand p{ color:var(--muted); font-size:14px; max-width:34ch; line-height:1.6; }
.foot-col h4{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-bottom:20px; font-weight:500; }
.foot-col a{ display:block; color:var(--muted); font-size:14px; margin-bottom:12px;
  transition:color .3s; }
.foot-col a:hover{ color:var(--cyan); }
.foot-bar{ display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; border-top:1px solid var(--line-2); flex-wrap:wrap; gap:14px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:var(--faint); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

/* body reveal gate */
body:not(.ready) main{ pointer-events:none; }
/* keep the hero headline + intro copy hidden until the cinematic intro plays,
   so the raw text never flashes in (appear → disappear → re-animate) on load.
   The fallback reveal()/watchdog adds .ready, so the heading still shows if the
   intro never runs. */
body:not(.ready) [data-hero-split],
body:not(.ready) [data-hero-fade]{ opacity:0; }

/* =========================================================================
   EMOTIONAL / WARM SECTIONS
   ========================================================================= */
.warm-accent{ color:var(--warm); }
[data-warm]{ color:var(--warm); }
[data-warm]::before{ background:var(--warm); opacity:.8; }

/* ---- ÜBER UNS · story ---- */
#ueber{ min-height:118vh; padding-top:17vh; padding-bottom:8vh; }
.story-head{ max-width:900px; margin-bottom:clamp(40px,6vw,72px); }
.story-head h2{ font-size:clamp(34px,5.6vw,86px); margin-top:22px; }
.story-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(30px,5vw,72px);
  align-items:start; }
.story-photo{ position:relative; }
/* explicit height — the <image-slot> host defaults to 160px, so aspect-ratio
   alone never took effect and the photo rendered as a short wide strip. */
.story-img{ display:block; width:100%; height:clamp(360px,33vw,470px); aspect-ratio:auto;
  border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.story-photo-glow{ position:absolute; inset:-30px -30px auto auto; width:60%; height:60%;
  background:radial-gradient(circle, rgba(39,129,188,.5), transparent 70%);
  filter:blur(50px); z-index:-1; }
.story-body .lead{ margin-bottom:38px; }
.timeline{ display:flex; flex-direction:column; gap:0; border-left:1px solid var(--line); }
.tl{ display:grid; grid-template-columns:96px 1fr; gap:18px; padding:18px 0 18px 26px;
  position:relative; }
.tl::before{ content:""; position:absolute; left:-5px; top:25px; width:9px; height:9px;
  border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue); }
.tl:not(:last-child){ border-bottom:1px solid var(--line-2); }
.tl-yr{ font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.tl-tx{ font-size:14.5px; color:var(--muted); line-height:1.55; align-self:center; }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; }
  .story-img{ height:clamp(260px,56vw,380px); max-width:560px; } }

/* ---- MENSCHEN · emotional warm peak ---- */
.menschen{ min-height:100vh; padding-top:14vh; padding-bottom:8vh; }
.menschen-head{ max-width:880px; margin-bottom:clamp(40px,6vw,74px); }
.menschen-claim{ font-size:clamp(36px,6.4vw,104px); margin:22px 0 28px; line-height:.94;
  text-shadow:0 2px 30px rgba(6,4,2,.5); }
.menschen .lead{ font-size:clamp(17px,1.7vw,23px); color:#dbe3f0; max-width:60ch;
  text-shadow:0 1px 2px rgba(6,4,2,.7), 0 0 22px rgba(6,4,2,.55); }
/* three equal, aligned tiles (the staggered 12-col layout read as misaligned).
   explicit height — the <image-slot> host defaults to 160px otherwise. */
.menschen-gallery{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px); margin-bottom:clamp(46px,7vw,86px); }
.mg{ overflow:hidden; border-radius:16px; border:1px solid var(--line); position:relative; }
.mg-img{ display:block; width:100%; height:clamp(220px,23vw,320px); }
@media (max-width:760px){
  .menschen-gallery{ grid-template-columns:1fr; }
  .mg-img{ height:clamp(200px,54vw,300px); }
}
/* testimonial */
.testimonial{ max-width:980px; margin:0 auto; text-align:center; }
.testimonial blockquote{ font-size:clamp(22px,3.2vw,44px); font-weight:600; line-height:1.28;
  letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.testimonial blockquote::first-letter{ color:var(--warm); }
.testimonial figcaption{ display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:34px; }
.t-avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; display:block;
  border:1px solid var(--line); flex:0 0 auto; }
.t-avatar-img{ width:100%; height:100%; display:block; }
.t-meta{ text-align:left; display:flex; flex-direction:column; }
.t-meta b{ font-size:15px; color:var(--ink); font-weight:700; }
.t-meta i{ font-family:var(--ff-mono); font-style:normal; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--warm); margin-top:4px; }

/* ---- KONTAKT ---- */
.kontakt{ min-height:108vh; padding-top:18vh; padding-bottom:10vh;
  display:flex; align-items:center; }
.kontakt-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(36px,6vw,90px);
  align-items:center; width:100%; }
.kontakt-claim{ font-size:clamp(46px,8vw,128px); margin:22px 0 30px; }
.kontakt-lead .lead{ margin-bottom:40px; max-width:46ch; }
.kontakt-mail{ display:inline-block; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(22px,2.6vw,38px); color:var(--ink);
  border-bottom:2px solid var(--cyan); padding-bottom:6px; line-height:1.1; }
.kontakt-mail:hover{ color:var(--cyan); }
.kontakt-claim .accent{ color:var(--cyan); }
.kontakt-details{ display:flex; flex-direction:column; gap:0; }
.kd{ display:flex; flex-direction:column; gap:6px; padding:22px 0;
  border-top:1px solid var(--line); }
.kd:last-child{ border-bottom:1px solid var(--line); }
.kd-label{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan); }
.kd-value{ font-size:16px; color:var(--ink); line-height:1.5; }
@media (max-width:860px){ .kontakt-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   CINEMATIC POLISH LAYER
   ========================================================================= */

/* ---- top scroll-progress beam ---- */
.scroll-prog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  pointer-events:none; background:rgba(120,165,215,.08);
}
.scroll-prog span{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--warm-hi));
  box-shadow:0 0 14px rgba(92,180,236,.7), 0 0 4px rgba(92,180,236,.9);
  will-change:transform;
}

/* ---- cinematic vignette + subtle letterbox framing ---- */
.vignette-cine{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,4,9,.55) 0%, transparent 12%, transparent 88%, rgba(2,4,9,.6) 100%),
    radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(2,4,9,.5) 100%);
  mix-blend-mode:multiply;
  animation:vigBreathe 14s var(--ease) infinite;
}
@keyframes vigBreathe{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

/* ---- logo: hover glow + slow idle float ---- */
.nav .logo .logo-svg{
  transition:filter .5s var(--ease), transform .5s var(--ease);
  filter:drop-shadow(0 0 0 rgba(92,180,236,0));
}
.nav .logo:hover .logo-svg{
  filter:drop-shadow(0 0 14px rgba(92,180,236,.55));
  transform:translateY(-1px) scale(1.02);
}
.foot-brand .logo-svg{ animation:logoFloat 9s var(--ease) infinite; }
@keyframes logoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* ---- CTA button: light sheen sweep ---- */
.btn-signal{ overflow:hidden; isolation:isolate; }
.btn-signal::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-130%);
}
.magnetic:hover .btn-signal::before{ animation:sheen 1.1s var(--ease); }
@keyframes sheen{ to{ transform:translateX(130%); } }

/* ---- nav-cta glow on hover (brand) ---- */
.nav-cta{ position:relative; overflow:hidden; }
.nav-cta:hover{ box-shadow:0 0 22px rgba(39,129,188,.35); }

/* ---- location dots: gentle pulse halo ---- */
.loc-card .dot{ animation:dotPulse 3.4s var(--ease) infinite; }
@keyframes dotPulse{
  0%,100%{ box-shadow:0 0 10px var(--cyan); }
  50%{ box-shadow:0 0 22px var(--cyan), 0 0 6px var(--cyan); }
}

/* ---- kicker tick: subtle breathing ---- */
.kicker::before{ animation:tickPulse 3s var(--ease) infinite; }
@keyframes tickPulse{ 0%,100%{ opacity:.5; width:24px; } 50%{ opacity:.95; width:34px; } }

/* ---- accessible focus ring (keyboard) ---- */
a:focus-visible, button:focus-visible, [data-magnetic]:focus-visible{
  outline:2px solid var(--cyan); outline-offset:4px; border-radius:6px;
}

/* ---- testimonial: soft quotation aura ---- */
.testimonial blockquote{ position:relative; }
.testimonial blockquote::before{
  content:"\201C"; position:absolute; left:50%; top:-46px; transform:translateX(-50%);
  font-size:120px; line-height:1; color:var(--warm); opacity:.16; font-family:Georgia,serif;
  pointer-events:none;
}

/* ---- process step active glow ---- */
.pstep.is-on{ box-shadow:0 24px 70px -44px color-mix(in oklab, var(--accent) 70%, transparent); }

/* ---- contact links + footer legal (Impressum essentials) ---- */
.kd-link{ transition:color .3s; }
.kd-link:hover{ color:var(--cyan); }
.foot-legal{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-bottom:26px;
  padding-top:26px; border-top:1px solid var(--line-2);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; color:var(--faint); }
.foot-legal a{ color:var(--faint); transition:color .3s; }
.foot-legal a:hover{ color:var(--cyan); }

/* =========================================================================
   LEISTUNGS-KAPITEL header · 5 themes · KENNZAHLEN · 4 WERTE
   ========================================================================= */
/* two additional track themes (Breitband-Förderung · Bahnquerungen) */
.ptrack[data-theme="violet"]{ --accent:#9b8cff; }
.ptrack[data-theme="teal"]{   --accent:#2fd4c0; }
.ptrack[data-theme="violet"] .ptab.is-active{ color:#0c0820; }
.ptrack[data-theme="teal"]   .ptab.is-active{ color:#04140f; }

/* compact chapter header so eyebrow+title+blurb+tags+rail fit the pinned view */
.ptrack-top{ margin-bottom:clamp(18px,2.6vw,30px); }
.ptrack-headline{ gap:10px; max-width:1100px; }
.ptrack-title{ font-size:clamp(26px,3.9vw,58px); }
.ptrack-eyebrow .idx{ color:var(--accent); opacity:.7; margin-right:2px; }
.ptrack-blurb{ color:var(--muted); font-size:clamp(13.5px,1.15vw,16px); line-height:1.55;
  max-width:64ch; text-wrap:pretty; margin-top:2px; }
.ptrack-tags{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 0; padding:0; }
.ptrack-tags li{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in oklab, var(--accent) 36%, var(--line)); border-radius:100px; padding:5px 11px; }
.ptrack-rail{ margin-top:8px; }
@media (max-height:860px){ .ptrack-blurb, .ptrack-tags{ display:none; } }
@media (max-width:820px){
  .ptrack-title{ font-size:clamp(24px,7vw,40px); }
  .ptrack-blurb{ display:none; }
  /* keep the chapter tabs on one swipeable row instead of wrapping to ~3 lines */
  .ptabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-bottom:18px; padding-bottom:2px; scrollbar-width:none; }
  .ptabs::-webkit-scrollbar{ display:none; }
  .ptab{ flex:0 0 auto; }
  /* free vertical room so the step cards fit fully inside the pinned 100svh */
  .ptrack-tags{ display:none; }
  .ptrack-top{ margin-bottom:14px; }
  .pprogress{ margin-top:16px; }
  /* compact the step cards: less padding + tighter type so text isn't clipped */
  .pstep{ width:min(380px,82vw); padding:22px 22px 24px; }
  .pstep .ph{ margin:12px 0 9px; }
  .pstep h3{ font-size:clamp(21px,5.4vw,28px); margin:0 0 10px; }
  .pstep p{ font-size:14px; line-height:1.55; }
}

/* ---- KENNZAHLEN strip (real, sourced figures · rolling counters) ---- */
.fakten{ padding-top:4vh; padding-bottom:10vh; }
.fakten-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(30px,5vw,56px) 0; }
.fakt{ display:flex; flex-direction:column; gap:10px; text-align:center; align-items:center; }
.fakt-num{ font-weight:800; font-size:clamp(30px,4.4vw,60px); letter-spacing:-.02em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; justify-content:center;
  text-shadow:0 2px 30px rgba(39,129,188,.35); }
.fakt-num i{ font-style:normal; font-size:.4em; color:var(--cyan); font-weight:600; margin-left:2px; }
.fakt-label{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); max-width:18ch; }
@media (max-width:820px){ .fakten-grid{ grid-template-columns:repeat(2,1fr); gap:34px 18px; } }

/* ---- WERTE · 4 up (current Leitbild) ---- */
.werte-grid--4{ grid-template-columns:repeat(4,1fr); }
.werte-grid--4 .werte-item h3{ font-size:clamp(23px,2.3vw,34px); }
@media (max-width:1040px){
  .werte-grid--4{ grid-template-columns:repeat(2,1fr); }
  .werte-grid--4 .werte-item:nth-child(3){ border-left:none; }
  .werte-grid--4 .werte-item:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:560px){
  .werte-grid--4{ grid-template-columns:1fr; }
  .werte-grid--4 .werte-item{ border-left:none; border-top:1px solid var(--line); }
  .werte-grid--4 .werte-item:first-child{ border-top:none; }
}

/* ---- per-step chapter imagery (Breitbandausbau) ----
   A full-bleed image layer inside the pinned chapter that crossfades one
   photo per process step. Sits above the WebGL canvas but below the step
   cards/header. Missing image files degrade gracefully → the particle
   formation behind simply shows through. */
.ptrack-pin{ position:relative; }
.ptrack-top, .ptrack-rail{ position:relative; z-index:1; }
.chapter-media{ position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease); }
.ptrack.media-active .chapter-media{ opacity:1; }
.chapter-media .cmedia{ position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity 1s var(--ease); transform:scale(1.03); }
.chapter-media .cmedia.is-on{ opacity:1; }
/* legibility scrim so the eyebrow/title/blurb (top-left) + cards stay readable */
.chapter-media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,8,18,.66) 0%, rgba(3,8,18,.28) 30%,
    rgba(3,8,18,.34) 64%, rgba(3,8,18,.52) 100%); }

/* ---- KARRIERE · detail (paths + Bereiche + Initiativbewerbung) ---- */
.karriere-detail{ padding-top:4vh; padding-bottom:14vh; }
.karr-head{ max-width:820px; margin:0 auto clamp(38px,6vw,66px); text-align:center; }
.karr-head h2 .accent{ color:var(--cyan); }
.karr-head .lead{ margin:18px auto 0; }
.karr-cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1000px; margin:0 auto; }
.karr-card{ border:1px solid var(--line); border-radius:18px; padding:34px 32px 30px;
  background:linear-gradient(165deg, rgba(13,21,36,.62), rgba(6,10,18,.42));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; flex-direction:column; align-items:flex-start;
  transition:border-color .4s, transform .5s var(--ease), background .4s; }
.karr-card:hover{ border-color:rgba(47,233,255,.4); transform:translateY(-6px); background:rgba(13,22,42,.6); }
.karr-num{ font-family:var(--ff-mono); font-size:12px; color:var(--cyan); letter-spacing:.2em; }
.karr-card h3{ font-size:clamp(22px,2.4vw,30px); margin:14px 0 12px; line-height:1.1; }
.karr-card p{ color:var(--muted); font-size:15px; line-height:1.62; margin:0 0 22px; }
.karr-link{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); display:inline-flex; gap:8px; align-items:center; margin-top:auto; }
.karr-link:hover{ color:var(--ink); }
.karr-link .arrow{ transition:transform .35s var(--ease); }
.karr-link:hover .arrow{ transform:translateX(5px); }
.karr-fields{ max-width:1000px; margin:clamp(32px,5vw,52px) auto 0; display:flex; flex-wrap:wrap;
  align-items:center; gap:12px 14px; justify-content:center; }
.karr-fields-label{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); }
.karr-fields ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; justify-content:center; }
.karr-fields li{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:7px 14px; transition:border-color .3s,color .3s; }
.karr-fields li:hover{ border-color:var(--cyan); color:var(--ink); }
.karr-apply{ text-align:center; margin-top:clamp(40px,6vw,64px); }
.karr-apply p{ color:var(--muted); margin-bottom:22px; font-size:16px; }
.karr-apply strong{ color:var(--ink); font-weight:700; }
@media (max-width:760px){ .karr-cards{ grid-template-columns:1fr; } }

/* =========================================================================
   CHAPTER LEGIBILITY — lift text contrast over the tinted particle scene.
   Deliberately subtle: soft text-shadow + a whisper scrim that pushes the
   SCENE back, slightly stronger card backing + a touch brighter body copy.
   No solid panels — the text stays integrated, just more readable.
   ========================================================================= */
.ptrack-eyebrow, .ptrack-title, .ptrack-blurb{
  text-shadow:0 1px 2px rgba(3,6,14,.6), 0 8px 28px rgba(3,6,14,.55);
}
.ptrack-blurb{ color:#ccd8ea; }                       /* was --muted: a touch brighter */
/* tags: readable text on a faint dark pill instead of accent-on-tint */
.ptrack-tags li{
  color:#e9eff9;
  background:rgba(6,11,22,.46);
  border-color:color-mix(in oklab, var(--accent) 52%, rgba(120,165,215,.22));
}
/* step cards: a little more backing + slightly brighter, shadowed copy */
.pstep{ background:linear-gradient(165deg, rgba(10,16,28,.68), rgba(5,9,16,.52)); }
.pstep h3{ text-shadow:0 1px 16px rgba(3,6,14,.5); }
.pstep p{ color:#bcc8dc; }
.pstep .ph{ color:#a4b4cc; }
/* whisper-soft scrim behind the pinned chapter content (sits BEHIND the cards
   /header, above the canvas) so text never lands on a bright particle hotspot */
.ptrack-pin::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 80% at 30% 38%, rgba(4,7,14,.40), transparent 58%),
    linear-gradient(180deg, rgba(4,7,14,.26) 0%, transparent 20%, transparent 72%, rgba(4,7,14,.30) 100%);
}

/* ---- Über uns: 3-paragraph body + full-width horizontal milestone timeline ---- */
.story-p{ color:var(--muted); font-size:clamp(15px,1.1vw,17px); line-height:1.7; margin-top:18px; }
.timeline-h{ display:grid; grid-template-columns:repeat(7,1fr); margin-top:clamp(48px,7vw,84px); }
.tlh{ position:relative; padding:26px 18px 0 0; border-top:1px solid var(--line); }
.tlh::before{ content:""; position:absolute; top:-5px; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 14px var(--cyan); }
.tlh-yr{ display:block; font-family:var(--ff-mono); font-weight:700; font-size:clamp(16px,1.3vw,19px);
  color:var(--ink); letter-spacing:.02em; margin-bottom:9px; }
.tlh-tx{ display:block; color:var(--muted); font-size:13px; line-height:1.5; max-width:22ch; }
@media (max-width:1080px){ .timeline-h{ grid-template-columns:repeat(4,1fr); row-gap:36px; } }
@media (max-width:720px){ .timeline-h{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .timeline-h{ grid-template-columns:1fr; } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; } .hero-scroll i::after{ animation:none; }
  .vignette-cine, .foot-brand .logo-svg, .loc-card .dot,
  .kicker::before, .magnetic:hover .btn-signal::before{ animation:none; }
  .chapter-media, .chapter-media .cmedia{ transition:none; }
}