/* ---- Core Theme ---- */
:root{
  --bg:#0A0A0A;
  --fg:#F7F7F7;
  --accent:#E10600;
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1100px 520px at 20% -10%, rgba(225,6,0,.07), transparent 60%),
    radial-gradient(880px 480px at 100% 0%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.noise{position:fixed; inset:0; pointer-events:none; opacity:.3; mix-blend:soft-light;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>');}

/* Layout helpers */
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.section{padding:72px 0}
.center{text-align:center}
.grid2{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:864px){ .grid2{grid-template-columns:1fr 1fr; gap:44px} }
@media(min-width:1200px){ .section{padding:96px 0} }

/* ---- Überschriften global mittig ---- */
.h2, .section h2, .section h1 { text-align:center; }

/* ---- Header / Nav ---- */
.nav{position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); background:rgba(0,0,0,.35); border-bottom:1px solid rgba(255,255,255,.1)}
.nav__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 0;
}
.brand{display:flex; align-items:center; text-decoration:none; color:inherit}
.brand__icon{height:32px; width:auto; object-fit:contain}
.brand__icon--big{height:40px}
.brand__icon--footer{height:60px}

@media(min-width:992px){
  .brand__icon--big{height:56px}
  .brand__icon--footer{height:84px}
}

/* Hamburger */
.nav-toggle{
  justify-self:end;
  display:inline-flex; flex-direction:column; gap:4px;
  background:transparent; border:0; padding:10px; cursor:pointer
}
.nav-toggle span{display:block; width:22px; height:2px; background:#fff; border-radius:1px; transition:.3s}

/* Mobile-Menü (Overlay) */
.menu{
  position:fixed; left:0; right:0; top:56px;
  background:rgba(0,0,0,.94);
  transform:translateY(-8px);
  opacity:0; visibility:hidden; transition:.28s ease;
  display:flex; flex-direction:column; gap:18px; padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.menu a{color:#fff; opacity:.92; text-decoration:none; font-weight:700; padding:10px 0}
.nav.open .menu{transform:none; opacity:1; visibility:visible}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Desktop-Menü rechtsbündig */
@media(min-width:864px){
  .nav__inner{grid-template-columns:auto 1fr auto}
  .nav-toggle{display:none}
  .menu{
    position:static; inset:auto; background:transparent; transform:none;
    opacity:1; visibility:visible; flex-direction:row; gap:24px; padding:0; border-bottom:0;
    justify-self:end; margin-left:auto;
  }
  .menu a{
    font-weight:600; padding:0; position:relative;
  }
  .menu a::after{
    content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
    background:#fff; transition:.25s ease;
  }
  .menu a:hover::after{ width:100% }
}

/* ---- Hero (Icon oben, Text mittig, 1 CTA) ---- */
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); text-transform:uppercase; letter-spacing:.18em; font-size:10px}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.headline{font-family:'Space Grotesk',sans-serif; font-weight:900; letter-spacing:-.02em; font-size:clamp(28px,8vw,48px); line-height:1.05; margin:14px 0 0}
.lede{max-width:60ch; color:rgba(255,255,255,.75); font-size:clamp(15px,2.8vw,18px); margin:14px auto 0}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; justify-content:center}
.btn{cursor:pointer; border:none; border-radius:18px; padding:14px 18px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.btn--primary{background:#fff; color:#000; box-shadow:0 12px 32px -12px rgba(0,0,0,.8)}
.btn--primary:hover{transform:translateY(-1px)}
.magnetic{position:relative; perspective:600px; transform-style:preserve-3d}

.hero-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255, 255, 255, 0.3); /* weißer Hintergrund, aber transparent */
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 60px -15px rgba(0,0,0,.6);
  backdrop-filter: blur(18px); /* Glassmorphism Effekt */
  width: min(360px, 86vw);
  margin: 12px auto 18px;
}

.hero-card .glow{
  position:absolute; inset:-20px; border-radius:24px; filter:blur(28px);
  background:conic-gradient(from 220deg at 30% 20%, rgba(225,6,0,.25), transparent 40%, rgba(255,255,255,.16))
}
.hero-icon{display:block; width:auto; height:280px; margin:0 auto}
@media(min-width:768px){ .hero-icon{height:340px} .hero-card{border-radius:36px; padding:24px} }

/* ---- Sections / Cards ---- */
.h2{font-family:'Space Grotesk',sans-serif; font-size:clamp(22px,4.5vw,32px); font-weight:800; letter-spacing:-.01em; margin:0}
.h3{font-family:'Space Grotesk',sans-serif; font-size:clamp(18px,3.8vw,24px); margin:0 0 6px}
.copy{color:rgba(255,255,255,.72); margin:8px 0 0}

.projects .grid2{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.hero-card.linklike{ text-decoration:none; color:inherit; }

/* ---- Footer ---- */
.footer{border-top:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.4); backdrop-filter:blur(12px); margin-top:32px}
.footer__inner{
  display:grid; gap:16px; align-items:center; padding:20px 0;
  grid-template-columns:1fr; text-align:center;
}
.footer__brand{justify-self:center}
.footer__links{list-style:none; margin:0; padding:0; display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.footer .link{color:#fff; text-decoration:none; opacity:.9}
.footer .link:hover{text-decoration:underline}
.footer-right{ text-align:center; }
.copyline{ text-align:center; color:rgba(255,255,255,.55); font-size:12px; padding:12px 0 }

/* Desktop-Footer: 3 Spalten, Kontakt rechts */
@media(min-width:768px){
  .footer__inner{
    grid-template-columns:1fr auto 1fr;
    text-align:left;
  }
  .footer-right{ text-align:right; justify-self:end; }
}

/* ---- Reveal on Scroll ---- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1; transform:none}

/* App container */
.app{min-height:60vh}