:root{
  --brand:#18976D;
  --bg:#0e0e10;
  --bg-alt:#1f1f23;
  --text:#f0f0f0;
  --muted:#aaa;
}

*{ box-sizing:border-box; }

html { height:100%; }

/* Sticky-Layout */
body{
  min-height:100%;
  display:flex;
  flex-direction:column;
  margin:0;
  font-family:Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

main { flex:1; }

/* HEADER mit Banner  */
header{
  position:relative;
  height:400px;                
  background:#000 url("Profilbanner.png") center center no-repeat;
  background-size:contain;      
  border-bottom:2px solid var(--brand);
}

header a.header-link{
  position:absolute;
  inset:0;
  display:block;
  text-indent:-9999px;          
}


header .hero{ position:relative; z-index:1; text-align:center; }
header .hero h1{ margin:0; font-size:2rem; }
header .hero p{ margin:.25rem 0 0; color:#ddd; }

/* LAYOUT & TYPO */
main, section{ max-width:800px; margin:2rem auto; padding:1rem; }
h1{ margin:0 0 .75rem; }
h2{ border-bottom:2px solid var(--brand); padding-bottom:.5rem; margin-top:0; }

/* EQUIPMENT-LISTE */
.equipment ul{ list-style:none; margin:0; padding:0; }
.equipment li{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.equipment i{ width:22px; text-align:center; color:var(--brand); }

/* LINKS & FOOTER */
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

footer{
  background:var(--bg-alt);
  color:var(--muted);
  text-align:center;
  padding:1rem;
  font-size:.95rem;
}
.nav{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin:.5rem 0 0;
}

/* Responsive */
@media (max-width:520px){
  header{ height:200px; }
}