:root{
  --bg:#0b0b0f; --card:#14141a; --muted:#a6a6b3; --text:#e9e9f1; --brand:#00f0ff; --brand-2:#ffd166; --border:#23232b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* Header/Footer */
.site-header{position:sticky;top:0;background:rgba(11,11,15,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;font-size:1.25rem;color:#fff}
.nav a{margin-left:16px;color:#fff;opacity:.9}
.nav a:hover{opacity:1}
.site-footer{border-top:1px solid var(--border);margin-top:60px}
.footer-inner{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* Hero */
.hero{padding:40px 0 10px 0}
.hero h1{font-size:3rem;line-height:1.1;margin:0 0 10px 0}
.hero p{max-width:720px;margin:0 0 20px 0;color:var(--muted)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brand);color:#000;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-weight:600}
.btn:hover{filter:brightness(1.05)}
.btn-secondary{background:transparent;border-color:var(--border);color:var(--text)}

/* Grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr} .hero h1{font-size:2.2rem}}

/* Karten (Standard) */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.card img{display:block;width:100%;height:220px;object-fit:cover;background:#1b1b22}
.card-body{padding:14px}
.card-body h3{margin:0 0 6px 0}
.card-body p{margin:0 0 10px 0;color:var(--muted)}

/* Meta Pills (Allgemein) */
.meta{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.meta li{background:#1b1b22;border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:#c9c9d4;font-size:.9rem}
.narrow{max-width:760px;margin:0 auto}
.form{display:grid;gap:12px;margin-top:10px}
.form label{display:grid;gap:6px}
input,textarea{background:#0e0e14;color:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px}

/* Autos – Liste mit Icons */
.icon{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:8px;opacity:.85}
.spec-list{list-style:none;padding:0;margin:8px 0 0 0;display:grid;gap:6px}
.spec-list li{color:var(--muted);text-align:center}
.card-body h3{text-align:center;margin-bottom:10px}

/* ===================== Mitgliederkarten ===================== */

/* gleich hohe Karten + Grundstil */
.member-card{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  min-height:380px;                 /* -> bei Bedarf anpassen */
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}

/* Banner fix */
.member-card .banner{
  width:100%; height:200px; object-fit:cover;
  border-bottom:1px solid var(--border);
  display:block; background:#0f0f15;
}

/* Body verteilt Inhalt vertikal */
.member-card .card-body{
  position:relative; z-index:2;               /* über Overlay */
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:14px; flex:1;
  background:rgba(0,0,0,.08);
}

/* Name/Rolle */
.member-name{margin:0;text-align:center;font-weight:800}
.member-desc{margin:0;color:var(--muted);text-align:center;min-height:1.4em}

/* Chips immer unten */
.chips{margin-top:auto;width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

/* Chip-Stil */
.pill{
  display:inline-block;padding:6px 10px;border-radius:9999px;
  background:#1a1a22;border:1px solid var(--border);color:#cfd0d6;
  font-size:.92rem;white-space:nowrap;
}
.pill a{color:#4bd1ff;text-decoration:none}
.pill a:hover{text-decoration:underline}

/* Ganzes Card-Overlay klickbar */
.member-card a.link-cover{
  position:absolute; inset:0; z-index:1;
  text-indent:-9999px; background:transparent;
}

/* Mail-Pill explizit klickbar lassen */
.member-card .pill.mail,
.member-card .pill.mail *{
  position:relative; z-index:5; pointer-events:auto !important;
}

/* Cyan-Glow (pulsierend) */
@keyframes caroticsGlow{
  0%{box-shadow:0 0 10px #00f0ff40,0 0 20px #00f0ff20;border-color:#00f0ff60}
  50%{box-shadow:0 0 20px #00f0ff90,0 0 40px #00f0ff40;border-color:#00f0ff}
  100%{box-shadow:0 0 10px #00f0ff40,0 0 20px #00f0ff20;border-color:#00f0ff60}
}
.member-card:hover{
  transform:translateY(-3px);
  animation:caroticsGlow 2.5s ease-in-out infinite;
  border:1px solid #00f0ff80;
}

/* Responsive Fix */
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
  .member-card{min-height:480px}
}