/* @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); */

:root{
  --bg:#080F13;
  --bg-2:#0D171D;
  --card:#111D24;
  --card-2:#16242C;
  --line:#22343D;
  --line-bright:#2E4650;
  --text:#EAF3F7;
  --text-muted:#7E9AA6;
  --accent:#54CAF1;
  --accent-2:#8FE3FF;
  --max:1180px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

.glow-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:0.35; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); }
.glow-a{ width:640px; height:640px; top:-220px; left:-160px; transition:transform 0.6s ease-out; }
.glow-b{ width:520px; height:520px; top:20%; right:-200px; opacity:0.2; animation:drift2 32s ease-in-out infinite; }
.glow-c{ width:460px; height:460px; bottom:-160px; left:30%; opacity:0.16; animation:drift1 22s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(40px,60px) scale(1.08); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-50px,40px) scale(0.94); } }
@media (prefers-reduced-motion: reduce){ .glow-a,.glow-b,.glow-c{animation:none; transform:none !important;} }

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(84,202,241,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(84,202,241,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

a{color:inherit;}
img,svg{display:block;max-width:100%;}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; position:relative; z-index:1; }

/* ---------- Nav ---------- */
header.nav{ position:sticky; top:0; z-index:70; background:rgba(8,15,19,0.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:var(--max); margin:0 auto; position:relative; z-index:1; }
.logo{ font-family:var(--font-mono); font-size:1.15rem; font-weight:500; letter-spacing:0.01em; text-decoration:none; color:var(--text); }
.logo .cursor{ display:inline-block; color:var(--accent); animation:blink 1.1s steps(1) infinite; text-shadow:0 0 12px rgba(84,202,241,0.9); }
@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.nav-links{ display:flex; gap:32px; list-style:none; margin:0; padding:0; font-size:0.95rem; }
.nav-links a{ text-decoration:none; color:var(--text-muted); transition:color 0.15s ease; }
.nav-links a:hover, .nav-links a:focus-visible{color:var(--accent-2);}
.nav-links-mobile{ display:none; }
.nav-cta{ font-family:var(--font-mono); font-size:0.9rem; background:var(--accent); color:#04141A; border:none; padding:10px 18px; border-radius:3px; text-decoration:none; font-weight:500; transition:box-shadow 0.2s ease, transform 0.15s ease; }
.nav-cta:hover, .nav-cta:focus-visible{ box-shadow:0 0 24px rgba(84,202,241,0.55); transform:translateY(-1px); }
.nav-toggle{ display:none; }

@media (max-width:760px){
  #navLinksDesktop{ display:none; }
  .nav-cta{display:none;}

  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    background:none;
    border:1px solid var(--line-bright);
    border-radius:4px;
    width:40px;
    height:36px;
    position:relative;
    z-index:70;
  }
  .nav-toggle-bar{
    display:block;
    width:16px;
    height:2px;
    background:var(--text);
    transition:transform 0.3s ease, opacity 0.2s ease;
  }
  .nav-toggle.open .nav-toggle-bar:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bar:last-child{ transform:translateY(-4px) rotate(-45deg); }

  .nav-links-mobile{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow-y:auto;
    position:fixed;
    inset:0;
    background:rgba(8,15,19,0.94);
    backdrop-filter:blur(16px);
    padding:32px;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
    z-index:60;
  }
  .nav-links-mobile.open{ opacity:1; pointer-events:auto; }
  .nav-links-mobile .mnav-kicker{
    font-family:var(--font-mono);
    font-size:0.8rem;
    color:var(--accent);
    margin-bottom:28px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  .nav-links-mobile.open .mnav-kicker{ opacity:1; transform:translateY(0); transition-delay:0.05s; }
  .nav-links-mobile li{
    list-style:none;
    border-bottom:1px solid var(--line);
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.4s ease, transform 0.4s ease;
  }
  .nav-links-mobile.open li{
    opacity:1;
    transform:translateY(0);
    transition-delay:calc(var(--i) * 70ms + 100ms);
  }
  .nav-links-mobile a{
    display:flex;
    align-items:baseline;
    gap:16px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2rem, 11vw, 2.8rem);
    letter-spacing:-0.01em;
    color:var(--text);
    text-decoration:none;
    padding:16px 0;
  }
  .nav-links-mobile a .mnav-index{
    font-family:var(--font-mono);
    font-weight:400;
    font-size:0.9rem;
    color:var(--accent);
    text-shadow:0 0 10px rgba(84,202,241,0.6);
  }
  .nav-links-mobile .mnav-footer{
    font-family:var(--font-mono);
    font-size:0.8rem;
    color:var(--text-muted);
    margin-top:28px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  .nav-links-mobile.open .mnav-footer{ opacity:1; transform:translateY(0); transition-delay:0.4s; }
}

/* ---------- Hero ---------- */
.hero{ padding:72px 0 0; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:start; padding-bottom:56px; }
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:44px;} }
.hero-eyebrow{ font-family:var(--font-mono); font-size:0.85rem; color:var(--accent); margin-bottom:22px; }
.hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem, 6vw, 5.2rem); line-height:1.02; letter-spacing:-0.015em; margin:0 0 26px; }
.hero p.lead{ font-size:1.12rem; color:var(--text-muted); max-width:44ch; margin:0 0 32px; }
.hero-ctas{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.btn-primary{ font-family:var(--font-mono); font-size:0.95rem; background:var(--accent); color:#04141A; font-weight:500; padding:15px 26px; border-radius:3px; text-decoration:none; display:inline-block; box-shadow:0 0 32px rgba(84,202,241,0.35); transition:box-shadow 0.2s ease, transform 0.15s ease; }
.btn-primary:hover, .btn-primary:focus-visible{ box-shadow:0 0 48px rgba(84,202,241,0.6); transform:translateY(-2px); }
.btn-text{ font-size:0.95rem; text-decoration:none; color:var(--text); border-bottom:1px solid var(--accent); padding-bottom:2px; transition:color 0.15s ease, text-shadow 0.15s ease; }
.btn-text:hover, .btn-text:focus-visible{ color:var(--accent-2); text-shadow:0 0 16px rgba(84,202,241,0.6); }

.terminal{ background:var(--card); border:1px solid var(--line-bright); border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px rgba(84,202,241,0.06), 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 60px -10px rgba(84,202,241,0.15); margin-top:12px; }
.terminal-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--card-2); border-bottom:1px solid var(--line); }
.terminal-dot{ width:10px; height:10px; border-radius:50%; background:var(--line-bright); }
.terminal-dot.accent{background:var(--accent); box-shadow:0 0 10px rgba(84,202,241,0.8);}
.terminal-title{ margin-left:8px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-muted); }
.terminal-body{ padding:24px 22px 28px; font-family:var(--font-mono); font-size:0.86rem; line-height:1.75; min-height:210px; }
.tline{ white-space:pre-wrap; word-break:break-word; }
.tprompt{color:var(--accent); text-shadow:0 0 8px rgba(84,202,241,0.5);}
.tcmd{color:var(--text);}
.tout{color:var(--text-muted); display:block; margin-bottom:14px;}
.tcaret{ display:inline-block; width:8px; height:1.05em; background:var(--accent); box-shadow:0 0 8px rgba(84,202,241,0.8); vertical-align:text-bottom; margin-left:2px; animation:blink 1s steps(1) infinite; }

/* marquee */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:16px 0; contain:layout paint; }
.marquee-track{ display:flex; width:max-content; gap:40px; will-change:transform; backface-visibility:hidden; }
.marquee-track span{ font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.08em; color:var(--text-muted); white-space:nowrap; }
.marquee-track span.dot{ color:var(--accent); }

/* ---------- Kunden ---------- */
.clients-section{ padding:72px 0; border-bottom:1px solid var(--line); }
.clients-label{ font-family:var(--font-mono); font-size:0.82rem; color:var(--text-muted); margin-bottom:28px; }
.clients-label span{ color:var(--accent); }
.clients-marquee{ overflow:hidden; contain:layout paint; }
.clients-track{ display:flex; width:max-content; gap:64px; will-change:transform; backface-visibility:hidden; }
.clients-track span{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem, 2.6vw, 1.9rem); color:var(--text-muted); white-space:nowrap; opacity:0.7; transition:opacity 0.2s ease, color 0.2s ease; }
.clients-track span:hover{ opacity:1; color:var(--text); }

/* ---------- Section shell ---------- */
section{ position:relative; }
.section-pad{ padding:100px 0; }
.section-head{ max-width:56ch; margin-bottom:52px; }
.section-head .kicker{ font-family:var(--font-mono); font-size:0.82rem; color:var(--accent); margin-bottom:12px; }
.section-head h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem, 2.8vw, 2.3rem); margin:0 0 14px; letter-spacing:-0.01em; }
.section-head p{ color:var(--text-muted); margin:0; font-size:1.02rem; }

/* ---------- Statement ---------- */
.statement{ padding:60px 0 110px; border-bottom:1px solid var(--line); }
.statement p{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem, 4.4vw, 3.1rem); line-height:1.18; letter-spacing:-0.01em; max-width:20ch; margin:0; color:var(--text); }

/* ---------- Leistungen: giant editorial list ---------- */
.services{ padding:100px 0; border-bottom:1px solid var(--line); }
.service-list{ border-top:1px solid var(--line); }
.service-row{ display:grid; grid-template-columns:70px 1fr; column-gap:28px; padding:34px 0; border-bottom:1px solid var(--line); align-items:baseline; transition:background 0.2s ease; cursor:default; }
.service-row:hover{ background:rgba(84,202,241,0.04); }
.service-index{ font-family:var(--font-mono); font-size:1rem; color:var(--text-muted); transition:color 0.2s ease; }
.service-row:hover .service-index{ color:var(--accent); }
.service-name{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 5.4vw, 3.6rem); line-height:1.05; letter-spacing:-0.01em; transition:transform 0.25s ease, color 0.25s ease; display:inline-block; }
.service-row:hover .service-name{ transform:translateX(10px); color:var(--accent-2); }
.service-tag{ font-family:var(--font-mono); font-size:0.5em; color:var(--accent); vertical-align:super; margin-left:6px; }
.service-desc{ color:var(--text-muted); max-width:56ch; margin-top:12px; font-size:1rem; }

@media (max-width:640px){
  .service-row{ grid-template-columns:1fr; row-gap:10px; }
  .service-name{ font-size:clamp(1.7rem, 9vw, 2.4rem); }
}

/* ---------- Prozess: horizontal scroll ---------- */
.process-section{ padding:100px 0; border-bottom:1px solid var(--line); }
.process-scroll{ position:relative; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px; scrollbar-width:none; -ms-overflow-style:none; }
.process-scroll::-webkit-scrollbar{ display:none; }
.process-track{ display:flex; gap:20px; padding-left:28px; }
@media (min-width:1480px){
  .process-track{ justify-content:center; padding-left:0; }
}
.process-spacer{ flex:0 0 8px; }
.process-card{ position:relative; flex:0 0 min(76vw, 340px); scroll-snap-align:center; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:28px 24px; overflow:hidden; min-height:260px; }
.process-card .num-bg{ position:absolute; top:-18px; right:-6px; font-family:var(--font-display); font-weight:700; font-size:7.5rem; color:var(--accent); opacity:0.08; line-height:1; pointer-events:none; }
.process-card h3{ font-family:var(--font-display); font-size:1.15rem; margin:60px 0 12px; font-weight:600; position:relative; }
.process-card p{ margin:0; color:var(--text-muted); font-size:0.96rem; position:relative; }
.scroll-hint{ font-family:var(--font-mono); font-size:0.78rem; color:var(--text-muted); margin-top:24px; }


/* ---------- Team ---------- */
.why{ padding:100px 0; border-bottom:1px solid var(--line); }
.why-inner{ display:grid; grid-template-columns:1fr 220px; gap:56px; align-items:center; }
@media (max-width:760px){ .why-inner{grid-template-columns:1fr;} .why-inner svg{width:140px; margin:0 auto;} }
.why p.body{ font-size:1.1rem; color:var(--text); max-width:52ch; }
.why .loc{ font-family:var(--font-mono); font-size:0.85rem; color:var(--accent); margin-top:18px; }

/* ---------- Kontakt: giant closing ---------- */
.contact{ padding:120px 0 90px; text-align:center; }
.contact .kicker{ font-family:var(--font-mono); font-size:0.82rem; color:var(--accent); margin-bottom:20px; }
.contact-huge{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 10vw, 7rem); line-height:0.98; letter-spacing:-0.02em; margin:0 0 40px; }
.contact-mail{ display:inline-block; font-family:var(--font-mono); font-size:clamp(1.2rem, 2.6vw, 1.8rem); color:var(--text); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:4px; margin-bottom:26px; transition:color 0.15s ease, text-shadow 0.15s ease; }
.contact-mail:hover, .contact-mail:focus-visible{ color:var(--accent-2); text-shadow:0 0 24px rgba(84,202,241,0.6); }
.contact-meta{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; font-size:0.9rem; color:var(--text-muted); }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:32px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.85rem; color:var(--text-muted); }
.footer-inner .logo{font-size:0.95rem;}
.footer-legal-links{ display:flex; gap:18px; }
.footer-legal-links button{ font-family:var(--font-body); font-size:0.85rem; background:none; border:none; padding:0; color:var(--text-muted); cursor:pointer; transition:color 0.15s ease; }
.footer-legal-links button:hover, .footer-legal-links button:focus-visible{ color:var(--accent); }

/* ---------- Legal panel: collapsed = zero height, fully hidden ---------- */
.legal-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.4s ease; }
.legal-panel.open{ grid-template-rows:1fr; }
.legal-panel-inner{ overflow:hidden; min-height:0; }
.legal-panel-content{ position:relative; border-top:1px solid var(--line); padding:40px 28px 56px; }
.legal-close{ position:absolute; top:32px; right:28px; width:32px; height:32px; border-radius:4px; background:none; border:1px solid var(--line-bright); color:var(--text-muted); cursor:pointer; font-family:var(--font-mono); transition:color 0.15s ease, border-color 0.15s ease; }
.legal-close:hover, .legal-close:focus-visible{ color:var(--text); border-color:var(--accent); }
.legal-block{ margin-bottom:32px; max-width:70ch; scroll-margin-top:30px; }
.legal-block h3{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin:0 0 14px; color:var(--text); }
.legal-block p{ margin:0 0 14px; color:var(--text-muted); font-size:0.92rem; line-height:1.7; }
.legal-block a{ color:var(--accent); text-decoration:underline; }
.legal-list{ list-style:none; margin:0 0 14px; padding:0; }
.legal-list li{ position:relative; padding-left:18px; margin-bottom:8px; }
.legal-list li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }