:root{
  --bg:#0a0a0d;
  --bg2:#0e0e14;

  --border:rgba(255,255,255,.09);
  --border-2: rgba(255,255,255,.14); /* hover */

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.6);
  --muted-2:rgba(255,255,255,.74);
  --dim:rgba(255,255,255,.4);

  --accent:#a78bfa;
  --accent-2:#7c3aed;
  --accent-soft:rgba(167,139,250,.14);
  --accent-glow:rgba(167,139,250,.28);

  --radius:16px;
  --pad:20px;
  --max:920px;

  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --shadow-soft:0 10px 30px rgba(0,0,0,.35); /* TODO: irgendwann mal cards damit */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100svh;
  color:var(--text);
  background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(167,139,250,.10), transparent 65%),
    radial-gradient(800px 600px at 110% 5%, rgba(124,58,237,.07), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit}

.mono{font-family:var(--mono);font-size:.92em}
.dim{color:var(--dim)}

.container{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(28px, 5vw, 48px) var(--pad);
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  background:rgba(0,0,0,.75);
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  transform:translateY(-140%);
  transition:transform .18s ease;
  z-index:10;
}
.skip-link:focus{transform:translateY(0)}

/* ===== Banner (alt, evtl wiederverwenden) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
}

/* header */
.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:36px;
}

.hero{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.pfp-wrap{
  position:relative;
  flex-shrink:0;
}
.pfp{
  width:84px;
  height:84px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-soft);
  display:block;
  position:relative;
}
.pfp-ring{
  position:absolute;
  inset:-5px;
  border-radius:999px;
  background:conic-gradient(from 180deg at 50% 50%, var(--accent), transparent 35%, var(--accent-2) 70%, transparent);
  opacity:.5;
  z-index:-1;
  filter:blur(8px);
  animation:spin 12s linear infinite;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.78rem;
  color:#a7f3d0;
  margin-bottom:6px;
}
.status-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.5);
}

.hero-text h1{
  margin:0;
  font-size:clamp(2rem, 4vw, 2.55rem);
  font-family:"MuseoModerno", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.3px;
  line-height:1.1;
}
.hero-accent{
  color:var(--accent);
  text-shadow:0 0 24px var(--accent-glow);
}

.sub{
  margin:.3rem 0 0;
  color:var(--muted);
  font-size:.96rem;
  font-weight:500;
}

/* nav */
.nav{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  padding-top:6px;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  padding:8px 13px;
  border-radius:999px;
  text-decoration:none;
  font-weight:500;
  font-size:.92rem;
  color:var(--muted-2);
  background:transparent;
  border:1px solid transparent;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.nav-link:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
  color:var(--text);
  transform:translateY(-1px);
}

.nav-link--cta{
  background:var(--accent-soft);
  color:#e9defc;
  border-color:rgba(167,139,250,.22);
}
.nav-link--cta:hover{
  background:rgba(167,139,250,.22);
  color:#fff;
}

.nav-link:focus-visible,
.icon-link:focus-visible,
.card:focus-visible,
.pill:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

main{
  display:flex;
  flex-direction:column;
  gap:40px;
  flex:1;
  animation:fadein .35s ease both;
}

h2{
  margin:0 0 14px;
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:-.1px;
}

p{margin:0;color:rgba(255,255,255,.85)}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

/* skills */
.skill-group + .skill-group{margin-top:18px}

.skill-group-title{
  margin:0 0 10px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dim);
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted-2);
  font-size:.86rem;
}
.chip:hover{
  border-color:var(--border-2);
  color:var(--text);
}

/* projects */
.icon-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:var(--muted-2);
  font-size:.85rem;
  transition:all .15s ease;
}
.icon-link:hover{
  background:var(--accent-soft);
  border-color:rgba(167,139,250,.28);
  color:#fff;
}
.icon-link svg{width:14px;height:14px}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.card{
  display:block;
  padding:18px 18px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(167,139,250,.3);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 0 0 1px var(--accent-glow), 0 12px 40px -10px var(--accent-glow);
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.card h3{margin:0 0 0;font-size:1.08rem;font-weight:600}
.card p{margin:0 0 12px;color:rgba(255,255,255,.72);font-size:.94rem}

.badge{
  font-family:var(--mono);
  font-size:.72rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid;
}
.badge--wip{
  color:#fbbf24;
  border-color:rgba(251,191,36,.28);
  background:rgba(251,191,36,.08);
}

.meta{
  display:inline-flex;
  align-items:center;
  font-size:.84rem;
  color:rgba(255,255,255,.62);
}

/* socials */
.links{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  font-weight:500;
  font-size: 0.92rem;
  color:rgba(255,255,255,.86);
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.pill:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}

.footer{
  margin-top:36px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:rgba(255,255,255,.52);
  font-size:.88rem;
}

@keyframes fadein{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}

@media (max-width:720px){
  .top{flex-direction:column;align-items:flex-start}
  .nav{padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  main{animation:none}
  .pfp-ring{animation:none}
  .nav-link,.icon-link,.card,.pill{transition:none !important}
  .card:hover{transform:none}
}