:root{
  --bg:#0b0c10;
  --card:#12141a;
  --muted:#9aa4b2;
  --text:#e6e9ef;
  --accent:#6ee7b7;     /* mint */
  --accent-2:#60a5fa;   /* blue */
  --ring:#22c55e;       /* green for rings */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #16202a 0%, transparent 50%) , var(--bg);
  line-height:1.55;
}

/* Header */
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(11,12,16,.6); border-bottom:1px solid #1f242d;
  padding:16px clamp(16px,4vw,40px);
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
}
.brand{display:flex; gap:16px; align-items:center}
.brand h1{margin:0; font-size:clamp(22px,3vw,28px)}
.subtitle{margin:2px 0 8px; color:var(--muted)}
.tags span{
  font-size:12px; color:#0b0c10; background:var(--accent);
  padding:4px 8px; border-radius:999px; margin-right:6px; font-weight:600;
}
.avatar{width:64px;height:64px;border-radius:16px;object-fit:cover;border:2px solid #1f2937}

.actions{display:flex; gap:8px; justify-self:end}
.actions button{
  background:#1b1f2a; color:var(--text); border:1px solid #2a3140;
  padding:10px 14px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow);
}
.actions button:hover{transform:translateY(-1px)}
.nav{grid-column:1/3; display:flex; gap:12px; flex-wrap:wrap}
.nav a{color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px}
.nav a:hover{background:#1b1f2a; color:var(--text)}

.container{
  max-width:1100px; margin:32px auto; padding:0 16px; display:grid; gap:24px;
}
.grid-2{display:grid; gap:24px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid #1f242d; border-radius:18px;
  padding:20px; box-shadow:var(--shadow);
}
.card h2{margin:0 0 12px 0; font-size:22px}
.muted{color:var(--muted)}

.contacts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; margin:14px 0; list-style:none}
@media (max-width:700px){.contacts{grid-template-columns:1fr}}

.skills-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:700px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
.skill{display:grid; place-items:center; gap:10px}
.skill span{font-weight:600}

.ring{
  --size: 110px;
  width:var(--size); height:var(--size); border-radius:50%;
  background:
    conic-gradient(var(--ring) calc(var(--val)*1%), #273043 0),
    radial-gradient(closest-side, #12141a 78%, transparent 80% 100%),
    #12141a;
  display:grid; place-items:center;
  position:relative; transition:filter .3s ease, transform .3s ease;
}
.ring::after{
  content: attr(style);
}
.ring::before{
  content: attr(data-label);
}
.ring:hover{filter:brightness(1.08); transform:scale(1.03)}
.ring::after{
  content: attr(data-val) "%";
  position:absolute; color:var(--text); font-weight:700; font-size:22px;
}
.ring::before{
  content:"";
}

/* Bars */
.bar{display:grid; grid-template-columns:120px 1fr; align-items:center; gap:10px; margin:10px 0}
.bar-fill{
  --h: 14px; --r: 10px;
  position:relative; height:var(--h); background:#1b2331; border-radius:var(--r); overflow:hidden;
}
.bar-fill::before{
  content:""; display:block; height:100%; width:var(--w);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:var(--r);
}

/* Charts */
.charts{display:grid; grid-template-columns:1fr; gap:18px}

/* Timeline */
.timeline-item{position:relative; padding-left:28px; margin:18px 0}
.timeline-item .timeline-dot{
  position:absolute; left:0; top:10px; width:12px; height:12px; border-radius:50%;
  background:var(--accent);
}
.timeline-content header{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.timeline-content .period{color:var(--muted); font-size:14px}
.toggle{
  margin-top:8px; background:#1b1f2a; border:1px solid #2a3140; color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.details{max-height:0; overflow:hidden; transition:max-height .5s ease, opacity .4s ease; opacity:.3}
.details.open{max-height:240px; opacity:1}

/* Projekte */
.projects{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){.projects{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.projects{grid-template-columns:1fr}}
.proj{background:#0f141c; border:1px solid #1f242d; border-radius:16px; padding:16px}
.btn{
  display:inline-block; padding:8px 12px; border-radius:10px; text-decoration:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0c10; font-weight:700
}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}
.slide-left{transform:translateX(-18px)}
.slide-right{transform:translateX(18px)}
.slide-up{transform:translateY(18px)}

/* Footer */
.footer{max-width:1100px; margin:0 auto 40px; padding:0 16px; color:var(--muted)}

/* Light theme */
.light{
  --bg:#f4f7fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --shadow: 0 10px 30px rgba(0,0,0,.06);
  background: radial-gradient(1200px 600px at 10% -10%, #dbeafe 0%, transparent 50%), var(--bg);
}
.light .tags span{color:#063e2f}

/* Print (A4) */
@media print{
  .actions, .nav, #projects .btn, #themeToggle{display:none !important}
  body{background:white}
  .card{box-shadow:none; border:1px solid #e5e7eb}
}


.period{color:var(--muted); font-size:14px}