:root{
  --bg:#0b0d10;
  --panel:#111418;
  --panel-2:#14181d;
  --ink:#eaeaea;
  --muted:#9aa0a6;
  --brand:#00c2b2;
  --brand-2:#35f0e0;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
  --ink-on-brand:#051b19;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Header */
.header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 2rem;position:sticky;top:0;z-index:10;
  background:rgba(5,7,10,.75);backdrop-filter:blur(8px);border-bottom:1px solid #0e1116;
}
.brand{display:flex;gap:.8rem;align-items:center;text-decoration:none;color:var(--ink)}
.logo{height:56px;width:auto}            /* Logo größer */
.brand-text{font-weight:600;opacity:.95;letter-spacing:.2px;font-size:1.15rem}

.nav-links{display:flex;gap:1.3rem;list-style:none;margin:0}
.nav-links a{
  color:var(--ink);text-decoration:none;padding:.35rem .45rem;border-radius:10px;opacity:.9;
  transition:opacity .2s, color .2s, background .2s;
}
.nav-links a:hover{opacity:1;color:var(--brand)}

/* Hero */
.hero{
  min-height:64vh;display:grid;place-items:center;text-align:center;
  background:var(--gradient);color:var(--ink-on-brand);
}
.hero-content{max-width:920px;padding:6rem 1.5rem}
.hero h1{margin:0}
.subtitle{opacity:.95;margin:.6rem auto 1.6rem;max-width:820px}
.hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;border-radius:999px;padding:.8rem 1.15rem;
  border:1px solid transparent;text-decoration:none;font-weight:650;
}
.btn-primary{background:#0c2f2c;color:#c8fffa;border-color:#184a46}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:#082523;border-color:#184a46}
.btn-ghost:hover{background:rgba(24,74,70,.12)}

/* Sections */
.section{padding:4rem 1.5rem;max-width:1100px;margin-inline:auto}
.lead{opacity:.95;max-width:900px;margin:0 auto 1.5rem}

/* Team */
.team{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;margin-top:1.25rem;
}
.person{
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.1rem;border:1px solid #171c23
}
/* kleineres Bildformat + sauberes Crop */
.avatar{
  width:100%;height:220px;               /* Bild kleiner, einheitlich */
  border-radius:12px;overflow:hidden;margin-bottom:.75rem;
}
.avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:translateZ(0);
}
.person h3{margin:.15rem 0 .4rem;font-size:1.05rem}
.roles{margin:0;padding-left:1rem;color:var(--muted)}
.roles li{margin:.15rem 0}

/* Focus / Work-in-progress */
.focus .work-items{list-style:none;display:grid;gap:1rem;margin:1.25rem 0 0;padding:0}
.focus .work-items li{
  background:var(--panel-2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.2rem;border:1px solid #1a2029
}
.tag{
  display:inline-block;font-size:.75rem;font-weight:750;letter-spacing:.3px;
  padding:.25rem .55rem;border-radius:7px;margin-bottom:.45rem
}
.tag-wip{background:#2a2f14;color:#e7ff9c;border:1px solid #3a4020}
.tag-pilot{background:#112b2a;color:#b8fffb;border:1px solid #1a4a48}
.tag-design{background:#241b33;color:#e4d4ff;border:1px solid #3a2e52}
.focus h3{margin:.25rem 0 .35rem}
.focus p{color:var(--muted)}

/* Services */
.services .service-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;margin-top:1.25rem
}
.service{
  background:var(--panel-2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.2rem;border:1px solid #1a2029;transition:transform .2s ease;
}
.service:hover{transform:translateY(-3px)}
.service h3{color:var(--brand-2);margin:0 0 .45rem}

/* Contact */
.contact p{color:var(--muted);margin-bottom:1rem}

/* Footer */
.footer{
  border-top:1px solid #11161c;background:#0a0d11;color:var(--muted);
  text-align:center;padding:1.5rem
}

/* Responsive */
@media (max-width:720px){
  .header{padding:.8rem 1rem}
  .nav-links{gap:.8rem}
  .hero-content{padding:4rem 1rem}
  .avatar{height:200px}
}
/* === Team-Avatare kleiner & einheitlich === */
.person { text-align: center; }                     /* Name/Listen schön zentriert */

.avatar{
  width: clamp(120px, 22vw, 160px);                 /* responsiv: 120–160px */
  aspect-ratio: 1 / 1;                              /* Quadrat */
  margin: 0 auto .75rem;                            /* zentrieren */
  border-radius: 12px;                              /* eckig-klein; für rund siehe unten */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);           /* dezente Tiefe */
  border: 1px solid #1a2029;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;                                /* sauberer Zuschnitt */
  display: block;
}

/* Titel/Listen optisch straffer */
.person h3 { margin: .25rem 0 .35rem; font-size: 1rem; }
.roles { color: var(--muted); margin: 0 auto; padding-left: 0; list-style: none; }
.roles li { margin: .2rem 0; }