:root{
  --graphite:#19191b;
  --graphite-2:#232326;
  --graphite-line:#38383c;
  --paper:#f4f2ec;
  --paper-2:#ffffff;
  --paper-line:#e2ded2;
  --ink:#19191b;
  --red:#c5161d;
  --red-dim:#8f1015;
  --brass:#a9824f;
  --steel:#8c8f95;
  --steel-light:#6b6b66;
  --display:'Big Shoulders Display', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* NAV */
header.site{
  position:sticky; top:0; z-index:60;
  background:var(--graphite);
  border-bottom:1px solid var(--graphite-line);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:68px;}
.logo{
  font-family:var(--display); font-weight:700; letter-spacing:0.02em;
  font-size:22px; color:var(--paper); text-transform:uppercase;
  display:flex; align-items:center; gap:11px;
}
.logo svg{width:30px; height:30px; flex-shrink:0;}
nav.wrap ul{list-style:none; display:flex; gap:32px;}
nav.wrap ul a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--steel);
  transition:color .15s ease;
}
nav.wrap ul a:hover,nav.wrap ul a.active{color:var(--paper);}
.nav-toggle{
  display:none; background:none; border:none; color:var(--paper); padding:6px; cursor:pointer;
}
.nav-toggle svg{width:24px; height:24px;}

.mobile-menu{
  display:none; flex-direction:column;
  background:var(--graphite); border-bottom:1px solid var(--graphite-line);
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.mobile-menu.open{max-height:260px;}
.mobile-menu a{
  padding:14px 32px; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--steel); border-top:1px solid var(--graphite-line);
}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--paper);}

/* FOOTER */
footer{
  background:var(--graphite); color:var(--steel);
  padding:40px 0; border-top:1px solid var(--graphite-line);
}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer .foot-links{display:flex; gap:22px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em;}
footer .foot-links a:hover{color:var(--paper);}
footer .social{display:flex; gap:16px;}
footer .social a{color:var(--steel); transition:color .15s ease;}
footer .social a:hover{color:var(--paper);}
footer .social svg{width:20px; height:20px; display:block;}
footer small{font-family:var(--mono); font-size:11.5px;}

@media (max-width:860px){
  nav.wrap ul{display:none;}
  .nav-toggle{display:block;}
  .mobile-menu{display:flex;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
}

/* CTA-BUTTON (Affiliate-Angebote etc.) */
.cta-btn{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; background:var(--red); color:#fff; padding:9px 16px; white-space:nowrap; flex-shrink:0; transition:background .15s ease;}
.cta-btn:hover{background:var(--red-dim,#8f1015);}
.cta-btn svg{width:12px; height:12px;}
.cta-btn-block{width:100%; justify-content:center; margin-top:12px;}