/* 2099‑Style: Neon, Glass, Dark, Subtle Animations */
:root{
  --bg:#080810;
  --panel:#0f1020cc;
  --ink:#d9e7ff;
  --muted:#9bb3d1;
  --brand:#7ae1ff;
  --brand2:#a08cff;
  --accent:#00ffd1;
  --ring:#2a2a52;
  --glow:0 0 32px rgba(122,225,255,.35),0 0 72px rgba(160,140,255,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  margin:0;color:var(--ink);background:radial-gradient(1200px 800px at 10% -10%,#0a0a18,transparent),
  radial-gradient(1000px 600px at 120% 10%,#0d1228,transparent), var(--bg);
  overflow-x:hidden;
}

/* Canvas BG */
#bg{position:fixed;inset:0;z-index:-1}

/* Layout */
.shell{width:min(1200px,92vw);margin-inline:auto}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:800;letter-spacing:.08em;text-decoration:none;color:var(--ink);}
.logo span{color:var(--brand)}
.menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.menu a{color:var(--muted);text-decoration:none}
.menu a:hover{color:var(--ink)}

.nav-toggle{display:none;background:none;border:1px solid var(--ring);color:var(--ink);padding:6px 10px;border-radius:8px}
@media (max-width:860px){
  .menu{display:none;position:absolute;right:4vw;top:64px;background:#0f1020ee;border:1px solid var(--ring);padding:16px 18px;border-radius:12px;flex-direction:column}
  .nav-toggle{display:inline-block}
}

.hero{padding:8vh 0 6vh; text-align:center}
.hero h1{font-size:clamp(32px,6vw,64px);line-height:1.05;margin:0 0 12px}
.glow{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(122,225,255,.25))}
.kicker{color:var(--muted);margin:6px 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:8px 0 18px}
.badge{border:1px solid var(--ring);padding:6px 10px;border-radius:999px;color:var(--ink);opacity:.9}
.cta-row{display:flex;gap:12px;justify-content:center;margin:14px 0 18px}
.btn{border:1px solid var(--ring);padding:12px 18px;border-radius:12px;text-decoration:none;color:var(--ink);display:inline-block}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#051016;box-shadow:var(--glow)}
.btn.ghost{background:transparent}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.metric{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid var(--ring);border-radius:14px;padding:16px 12px}
.num{font-size:clamp(28px,4.5vw,44px);font-weight:800}
.label{color:var(--muted);font-size:14px}

.panel{margin:8vh 0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border:1px solid var(--ring);border-radius:18px;padding:24px}
.panel h2{margin:0 0 12px;font-size:clamp(22px,4vw,32px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:10px 0 0;list-style:none}
.chips li{border:1px solid var(--ring);padding:6px 10px;border-radius:999px}

.grid.skills{display:grid;grid-template-columns:1fr;gap:14px}
.skill-head{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--muted)}
.bar{height:10px;background:#0b0b18;border:1px solid var(--ring);border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));box-shadow:var(--glow)}

.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{border:1px solid var(--ring);border-radius:16px;padding:16px;min-height:160px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}

.timeline{display:grid;gap:12px}
.titem{border-left:3px solid var(--brand);padding:8px 12px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border-radius:8px}

.contact{display:grid;gap:12px}
.contact .row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.contact input, .contact textarea{background:#0b0b18;border:1px solid var(--ring);border-radius:12px;padding:12px;color:var(--ink)}
.contact button{cursor:pointer}

.footer{display:flex;justify-content:space-between;align-items:center;padding:24px 0;color:var(--muted)}
.footer .legal{display:flex;gap:12px}
.link{border:none;background:none;color:var(--ink);opacity:.9;cursor:pointer;text-decoration:underline}

.modal::backdrop{background:rgba(4,6,18,.75)}
.modal{max-width:min(720px,92vw);border:1px solid var(--ring);border-radius:16px;background:#0b0b18;color:var(--ink);padding:0}
.modal article{padding:18px}
.modal h3{margin:0 0 8px}
.modal menu{display:flex;justify-content:flex-end;margin-top:14px}

.reveal{opacity:0;transform:translateY(12px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:none}

/* === Enhancements: clickable project cards & focus/hover cues === */
/* Make project/news cards feel clickable when they contain a primary link */
.card .card-link{ display:block; color:inherit; text-decoration:none; }
.card .card-link{ cursor:pointer; }

/* Hover/active affordance */
.card:hover{ 
  box-shadow: var(--glow);
  transform: translateY(-2px);
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
  border-color: rgba(122,225,255,.35);
}
.card:active{ transform: translateY(0); }

/* Keep spacing tidy when buttons are present */
.card .btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* Kicker a bit subtler but readable */
.kicker{ 
  letter-spacing:.12em; text-transform:uppercase; font-size:11px; 
  color: var(--muted);
}

/* Keyboard accessibility – visible focus on the whole card link */
.card .card-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(122,225,255,.45), var(--glow);
  border-radius: 12px;
}

/* Small tweak: ensure grid cards don't collapse spacing on very narrow viewports */
@media (max-width: 420px){
  .grid.cards{ gap: 14px; }
}

/* Mobile-Optimierung + Safe-Area (iOS) */
@media (max-width: 640px){
  /* Container links/rechts ist schon safe; hier Footer mittig ausrichten */
  footer .foot{
    justify-content: center;   /* mittig statt space-between */
    text-align: center;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .legal-bar{ justify-content: center; }
}