:root{
  --bg:#0b1020;
  --panel:rgba(255,255,255,.06);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.14);
  --shadow:0 16px 60px rgba(0,0,0,.45);
  --r:18px;
  --max:1100px;

  --g1: radial-gradient(1200px 600px at 10% 10%, rgba(120,90,255,.35), transparent 60%);
  --g2: radial-gradient(900px 500px at 90% 20%, rgba(0,220,255,.25), transparent 55%);
  --g3: radial-gradient(800px 550px at 50% 90%, rgba(255,120,120,.18), transparent 55%);
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  line-height:1.55;

  background: var(--g1), var(--g2), var(--g3), var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}
main{ flex: 1; }

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(12px);
  background:rgba(11,16,32,.55);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;

  display:grid;
  grid-template-columns: auto 1fr auto auto;
  /* left | spacer | center-nav | right */
  align-items:center;
  gap:12px;
}

/* left stays left */
.topbar-left{ justify-self:start; }

/* hamburger sits in the spacer column, centered */
.nav-toggle{
  justify-self:center;
}

/* nav centered (desktop) */
.nav-links{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:6px;
}

/* right stays right */
.topbar-right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:650; letter-spacing:.2px;
}

.logo{
  position:relative;
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(120,90,255,.9), rgba(0,220,255,.8));
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
}

/* LEFT + RIGHT pins */
.logo::before,
.logo::after{
  content:"";
  position:absolute;
  top:6px;
  bottom:6px;
  width:6px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.45) 0px,
      rgba(255,255,255,.45) 2px,
      transparent 2px,
      transparent 6px
    );
}

.logo::before{ left:-6px; }
.logo::after{ right:-6px; }

/* TOP + BOTTOM pins */
.logo-pins{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.logo-pins::before,
.logo-pins::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  height:6px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.45) 0px,
      rgba(255,255,255,.45) 2px,
      transparent 2px,
      transparent 6px
    );
}

.logo-pins::before{ top:-6px; }
.logo-pins::after{ bottom:-6px; }

/*.brand small{display:block;font-weight:500;color:var(--muted);margin-top:-2px}*/
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;          /* damit die 2 Zeilen kompakter wirken */
  font-size:0.95rem;     /* ← hier regelst du die Größe */
  font-weight:700;       /* Name etwas kräftiger */
}

.brand-text small{
  margin-top:2px;
  font-size:0.90rem;        /* das ist sichtbar größer, aber nicht fett */
  font-weight:600;
  letter-spacing:0.4px;
  color:var(--muted);
}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{
  padding:10px 12px;border-radius:12px;color:var(--muted);
  border:1px solid transparent;transition:160ms ease;font-weight:560;
}
.nav-link:hover{
  color:var(--text);
  border-color:var(--line);
  background:rgba(255,255,255,.04);
  text-decoration:none;
}

.nav-toggle {
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;

  color: var(--text);
  fill: none;
}

.nav-toggle svg {
  stroke: var(--text);
}

.nav-toggle:hover{
  background:rgba(255,255,255,.10);
  color: #ffffff;
}

.lang-toggle{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.lang-toggle:hover{background:rgba(255,255,255,.10)}
.lang-pill{
  font-weight:750;
  font-size:.9rem;
  letter-spacing:.4px;
  color:rgba(255,255,255,.86);
}

/* Icon buttons (mail/linkedin) */
.icon-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:rgba(255,255,255,.85);
  font-weight:600;
  font-size:.9rem;
  transition:160ms ease;
}
.icon-btn:hover{
  background:rgba(255,255,255,.12);
  color:var(--text);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-extras-icons{
  display:none;
  gap:10px;
  justify-content:flex-start;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

@media (max-width: 720px){
  .nav-toggle{display:inline-flex;}

  .topbar-inner{position:relative;}

  .nav-links{
    position:absolute;
    top:64px;
    right:18px;
    left:18px;
    display:none;
    flex-direction:column;
    padding:10px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(11,16,32,.92);
    backdrop-filter:blur(12px);
    box-shadow:var(--shadow);
  }
  .nav-links[data-open="true"]{display:flex;}

  .nav-link{width:100%;}

  .topbar-actions{display:none;}

  .nav-links[data-open="true"] .nav-extras-icons{
    display:flex;
  }

  .nav-links[data-open="true"] .nav-extras-icons .icon-btn{
    width:44px;
    height:44px;
    border-radius:14px;
  }
}

.wrap{max-width:var(--max);margin:0 auto;padding:22px 18px 56px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel{padding:20px}

h1{margin:0 0 10px;font-size:clamp(30px,4vw,44px);letter-spacing:-.6px;line-height:1.08}
h2{margin:0 0 10px;font-size:1.25rem;letter-spacing:-.2px}
.lead{margin:0;color:var(--muted);font-size:1.05rem;max-width:60ch}
p{color:var(--muted)}

.proj{display:grid;gap:10px;margin-top:10px}
.proj-item{
  padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);transition:160ms ease;
}
.proj-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.title{font-weight:750;letter-spacing:-.15px;margin-bottom:2px}
.desc{margin:0;color:var(--muted)}

.wrap.stack > section{margin-top:20px}
.wrap.stack > section:first-child{margin-top:0}

.notice{
  background: rgba(255, 200, 0, 0.08);
  border: 1px solid rgba(255, 200, 0, 0.25);
}
.notice-inner{
  display:flex;
  align-items:center;
  gap:14px;
}
.notice-icon{font-size:1.6rem}
.notice-text{
  font-weight:500;
  color:var(--muted);
}

footer{
  margin-top:26px;
  padding-top:18px;
  padding:18px 18px 18px 18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.95rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-links a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:150ms ease;
}
.footer-links a:hover{
  color:var(--text);
  border-bottom-color:var(--text);
}

ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}