:root{
  --bg:#0b0c0f;
  --bg-alt:#0f1116;
  --text:#e6e8ee;
  --muted:#9aa3af;
  --accent:#00e5f1;
  --accent-2:#b8fbff;
  --card:#0c111b;
  --stroke:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --header-h: 68px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior-x:none;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:96px 0;position:relative}
.section.alt{background:var(--bg-alt)}
.section-head{margin-bottom:28px}
h1{font-size:clamp(36px,6vw,64px);line-height:1.05;margin:12px 0 12px}
h2{font-size:clamp(28px,4.5vw,40px);margin:0 0 6px}
h3{margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* ===== Header: FIXED ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg,#0b0c0fe6,#0b0c0f99 60%,transparent);
  border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(1.1) blur(8px);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-name span{color:var(--accent)}
.brand-mark{width:28px;height:28px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links .btn{margin-left:6px}

/* Burger – sauber auf Mobile */
.hamburger{
  display:none; position:relative; width:40px;height:40px;
  border:1px solid var(--stroke); border-radius:12px;
  background:rgba(255,255,255,.03);
  -webkit-tap-highlight-color:transparent; z-index:120;
}
.hamburger span{
  position:absolute; left:9px; right:9px; height:2px;
  background:#fff; border-radius:2px; transition:.25s;
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:26px; }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Platz unter fixed Header schaffen */
.site-header + main{ padding-top: var(--header-h); }

.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--stroke);padding:12px 16px;border-radius:12px;transition:.25s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent}
.btn-accent{
  background:linear-gradient(90deg,var(--accent),#28ffd6);color:#001316;
  border-color:transparent;font-weight:700;
  box-shadow:0 6px 24px rgba(0,229,241,.25);
}

/* ===== HERO BG (Animated Neon) ===== */
.hero{padding-top:40px; overflow:hidden}
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(0,229,241,.08), transparent 60%),
              radial-gradient(800px 500px at 80% 20%, rgba(184,251,255,.07), transparent 55%);
}
.hero-bg .blob{
  position:absolute; width:54vmax; height:54vmax; border-radius:50%;
  filter: blur(48px); opacity:.25; mix-blend:screen;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
  animation: drift 24s ease-in-out infinite;
}
.hero-bg .b1{ top:-20vmax; left:-10vmax; }
.hero-bg .b2{ top:-8vmax; right:-12vmax; animation-duration: 28s; }
.hero-bg .b3{ bottom:-22vmax; left:10vmax; animation-duration: 32s; }
@keyframes drift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%    { transform: translate3d(2vmax,-1vmax,0) scale(1.08); }
}
.hero-bg .grain{
  position:absolute; inset:-20%; background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.06'/></svg>")
    center/300px repeat; mix-blend:soft-light; animation: grainMove 40s linear infinite;
}
@keyframes grainMove{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-10%,5%,0)} }

/* ===== Layout ===== */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .nav-links{display:none}
  .hamburger{display:block}
}

/* Eyebrow & effects */
.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.grad-text{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.neon{color:var(--accent);text-shadow:0 0 18px rgba(0,229,241,.35)}
.cta-row{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}

/* Badges */
.badges{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap}
.badge{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border:1px solid var(--stroke);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.badge .num{font-weight:800;font-size:1.25rem;color:var(--accent)}

/* Hero Art */
.phone-stack{position:relative;isolation:isolate; overflow-x:clip;}
.phone-stack img{width:100%;max-width:420px;border-radius:18px;border:1px solid var(--stroke);box-shadow:var(--shadow)}
.phone-stack .float{position:absolute;right:0;bottom:-20px;transform:rotate(-3deg);max-width:88%}
@media (max-width:900px){.phone-stack .float{right:0;bottom:-16px;max-width:92%}}

/* ===== Marquee: endlos, ohne Lücken, langsamer ===== */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  margin-top: 48px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  line-height: 0;
}
.marquee .track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
  will-change: transform;
  white-space: nowrap;
}
.marquee .group {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.marquee .group span {
  display: inline-block; flex: 0 0 auto;
  padding: 0 28px; line-height: 1; opacity: .75; white-space: nowrap;
}
@keyframes marquee { from {transform:translateX(0)} to {transform:translateX(-50%)} }
@media (max-width: 768px){ .marquee .track { animation-duration: 42s; } }

/* Cards/Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--stroke);border-radius:16px;padding:22px;box-shadow:var(--shadow);transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.55)}
.card .icon{width:38px;margin-bottom:8px;filter:drop-shadow(0 0 8px rgba(0,229,241,.35))}
.card ul{margin:10px 0 0 18px;padding:0}
.card li{margin:6px 0}

/* Cases – kompakter Grid + Card-Styling */
.cases-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width:1000px){ .cases-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){  .cases-grid{ grid-template-columns:1fr; } }
.case-card{
  position:relative; display:flex; flex-direction:column;
  border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--stroke); overflow:hidden; box-shadow:var(--shadow);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.case-card:hover{ transform:translateY(-6px); box-shadow:0 18px 50px rgba(0,0,0,.55); border-color:transparent; }
.case-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.case-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition: transform .8s ease; filter:saturate(1.05) contrast(1.02); }
.case-card:hover .case-media img{ transform:scale(1.06); }
.kpis{ position:absolute; left:12px; bottom:12px; display:flex; gap:8px; flex-wrap:wrap; z-index:2; }
.kpi{ font-size:.78rem; line-height:1; padding:6px 8px; border-radius:999px; border:1px solid var(--stroke); background:rgba(6,10,14,.55); backdrop-filter:blur(6px); }
.kpi.good{ background:linear-gradient(90deg, var(--accent), #28ffd6); color:#001316; border-color:transparent; font-weight:700; }
.case-body{ padding:12px 12px 14px; }
.case-body h3{ margin:0 0 6px; font-size:1rem; }
.tags{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.tags span{ font-size:.72rem; line-height:1; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.03); opacity:.9; }

/* Work (alte simple Grid-Fallbacks) */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1000px){.work-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.work-grid{grid-template-columns:1fr}}
.work-card{position:relative;border:1px solid var(--stroke);border-radius:16px;overflow:hidden;background:var(--card)}
.work-card img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.9;transition:.35s;display:block}
.work-card .work-meta{position:absolute;inset:auto 14px 14px 14px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:10px 12px;border:1px solid var(--stroke);border-radius:12px}
.work-card:hover img{transform:scale(1.025);opacity:1}

/* Timeline */
.timeline{display:grid;gap:22px;margin:24px 0 0;border-left:2px solid var(--stroke);padding-left:18px}
.timeline li{list-style:none;position:relative;padding-left:0}
.timeline .dot{position:absolute;left:-10px;top:.25em;width:12px;height:12px;background:var(--accent);border-radius:50%;box-shadow:0 0 20px rgba(0,229,241,.6)}

/* FAQ */
.faq-item{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--stroke);border-radius:14px;padding:14px 16px;margin:10px 0}
.faq-item summary{cursor:pointer;font-weight:600}
.faq-item[open]{border-color:rgba(0,229,241,.35)}

/* Contact */
.contact-form{display:grid;gap:12px;margin-top:10px}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:#0a0d12;color:var(--text)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid rgba(0,229,241,.35)}
.reach{border:1px solid var(--stroke);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.socials{display:flex;gap:10px;margin-top:8px}
.soc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke)}
.soc:hover{background:rgba(255,255,255,.06)}

/* Footer */
.site-footer{border-top:1px solid var(--stroke);padding:26px 0;background:var(--bg-alt)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;gap:14px}
.foot-brand{display:flex;align-items:center;gap:10px}

/* Reveal Animations */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.15s}.delay-2{transition-delay:.3s}.delay-3{transition-delay:.45s}.delay-4{transition-delay:.6s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .marquee .track{animation:none}
}

/* Mobile Menu Panel */
@media (max-width:900px){
  .nav-links{
    position:absolute; top:calc(var(--header-h) + 8px); right:16px;
    display:none; flex-direction:column; gap:12px;
    padding:14px; border:1px solid var(--stroke); border-radius:14px;
    background:rgba(10,12,16,.92);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    z-index:110;
  }
  .nav-links.open{ display:flex !important; }
}

/* iOS smoother header */
@media (max-width:768px){
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(11,12,15,.92); }
}