:root{
  --bg: #0b0d10;
  --bg-alt: #0d1117;
  --fg: #e9eef5;
  --muted:#a9b3c1;
  --brand:#a6e1ff;
  --accent:#88ffcc;
  --card:#12161d;
  --glass: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.theme{background:radial-gradient(1200px 800px at 80% -20%, #1a2340 0%, transparent 60%), var(--bg);
  min-height:100dvh;overflow-x:hidden}

/* Compact header */
.nav{position:sticky;top:0;z-index:40;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:8px 16px;background:linear-gradient(180deg, rgba(10,12,14,.85), rgba(10,12,14,.2) 60%, transparent);backdrop-filter: blur(8px);border-bottom:1px solid var(--border);min-height:52px}
.nav nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nav a{padding:6px 8px;border-radius:10px}
.nav a:hover{background:var(--glass)}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand-logo{height:26px;width:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* Burger button */
.burger{display:none;position:relative;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:transparent;align-items:center;justify-content:center;padding:0}
.burger span{position:absolute;display:block;width:18px;height:2px;background:var(--fg);transition:.25s}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(2){opacity:1}
.burger span:nth-child(3){transform:translateY(6px)}
.nav.open .burger span:nth-child(1){transform:rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:rotate(-45deg)}

/* Mobile nav layout */
@media (max-width:900px){
  .burger{display:flex}
  .nav nav{position:absolute;top:52px;right:10px;display:none;flex-direction:column;background:rgba(10,12,14,.98);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:220px}
  .nav.open nav{display:flex}
}

.bg{position:fixed;inset:0;z-index:-1}
.bg .glow{position:absolute;filter: blur(80px);opacity:.5;mix-blend-mode:screen}
.bg .g1{width:40vw;height:40vw;left:-5vw;top:-5vw;background:radial-gradient(circle at center, #3b82f6, transparent 60%)}
.bg .g2{width:35vw;height:35vw;right:-5vw;top:10vh;background:radial-gradient(circle at center, #10b981, transparent 60%)}
.bg .grain{position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'1600\' height=\'900\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'.9\' numOctaves=\'2\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'table\' tableValues=\'0 0.04 0\'/></feComponentTransfer><feBlend mode=\'screen\'/></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>');opacity:.28;pointer-events:none}

.hero{min-height:90dvh;display:grid;place-items:center;padding:80px 24px 40px;text-align:center;position:relative}
.headline{font-size:clamp(2.8rem, 8vw, 7rem);line-height:.9;letter-spacing:-.02em;margin:0}
.headline .line{display:block;position:relative}
.headline .spark{position:absolute;width:10px;height:10px;border-radius:50%;background:linear-gradient(45deg,var(--brand),var(--accent));box-shadow:0 0 20px var(--brand);left:-.3em;top:.55em;animation:orbit 6s linear infinite}
@keyframes orbit{to{transform:rotate(360deg) translateX(1.2em) rotate(-360deg)}}

.kicker{max-width:54ch;color:var(--muted);font-size:clamp(1rem,2.2vw,1.25rem);margin-top:12px}
.cta{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid var(--border);transition:.25s transform, .25s background}
.btn-primary{background:linear-gradient(90deg, rgba(166,225,255,.15), rgba(136,255,204,.15));box-shadow:var(--shadow)}
.btn-ghost:hover{background:var(--glass)}
.btn:hover{transform:translateY(-2px)}

.scrollcue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);opacity:.7;font-size:.9rem;letter-spacing:.2em}

.work{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:22px;max-width:1100px;margin:40px auto;padding:0 24px}
.portal{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--border);padding:26px;isolation:isolate;min-height:320px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.portal h2{font-size:clamp(1.6rem,3vw,2rem);margin:0 0 4px}
.portal p{color:var(--muted)}
.portal .portal-bg{position:absolute;inset:-40% -20%;background:
  radial-gradient(600px 400px at 20% 20%, rgba(59,130,246,.35), transparent 60%),
  radial-gradient(600px 400px at 80% 80%, rgba(16,185,129,.35), transparent 60%);
  filter:blur(30px);z-index:-1;animation:float 10s ease-in-out infinite alternate}
.portal-alt .portal-bg{background:
  radial-gradient(600px 400px at 20% 80%, rgba(168,85,247,.35), transparent 60%),
  radial-gradient(600px 400px at 80% 20%, rgba(99,102,241,.35), transparent 60%)}
@keyframes float{to{transform:translate3d(3%, -2%, 0)}}

.ticker{overflow:hidden;border-block:1px solid var(--border);margin:60px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.ticker .track{display:flex;gap:40px;white-space:nowrap;animation:marq 20s linear infinite;padding:10px 0;color:#b9c4d1}
.ticker span{font-weight:600;letter-spacing:.25em}
@keyframes marq{to{transform:translateX(-50%)}}

.about{padding:40px 24px 80px}
.about-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;min-height:160px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}

.contact{padding:40px 24px 120px;text-align:center}
.contact h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:10px}
.tel-note{font-size:.85rem;opacity:.8;margin-top:8px}

.footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding:12px 16px;background:linear-gradient(180deg, transparent, rgba(255,255,255,.02))}
.footer a{opacity:.8}
.footer a:hover{opacity:1}

[data-reveal]{opacity:0;transform:translateY(18px);transition:.6s cubic-bezier(.2,.7,.1,1)}
[data-reveal].in{opacity:1;transform:none}

@media (max-width:900px){
  .work{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}

/* Pages */
.page{max-width:900px;margin:40px auto;padding:0 24px}
.page h1{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:10px}
.page .paper{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}

/* Produkte */
.products{max-width:1100px;margin:40px auto;padding:0 24px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.prod-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.prod-title{font-size:1.25rem;font-weight:700;margin:0}
.price{font-size:1.4rem;font-weight:800}
.badge{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;opacity:.9}
.note{color:var(--muted);font-size:.95rem}
.cta-col{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}