:root {
  --bg:#000000; --fg:#FFFFFF;--emerald:#1C7C54; --emerald-dark:#0E5036;
  --emerald-border:rgba(28,124,84,.25);
  --rose:#E6AFA3; --rose-dark:#C8927E;--rose-border:rgba(230,175,163,.25);
  --primary:var(--emerald); --primary-dark:var(--emerald-dark);
  --primary-border:var(--emerald-border);
  --accent:var(--rose); --accent-dark:var(--rose-dark);
  --accent-border:var(--rose-border);
  --muted:#b8b8b8; --card-2:#171717; --maxw:1200px;
}
*{box-sizing:border-box}
body, html {margin:0; padding:0; overflow-x:hidden; width:100%}
body {
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.85}
header {
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(0,0,0,.9); border-bottom:1px solid var(--primary-border);
}
.nav{max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:24px; justify-content:space-between;}
.logo-title{font-weight:800; letter-spacing:3px; font-size:20px; text-transform:uppercase;
  background:linear-gradient(180deg,var(--primary) 0%, var(--primary-dark) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a{color:#fff; font-weight:600; font-size:14px}
.social{display:flex; gap:10px; align-items:center}
.social a{display:inline-flex; width:72px; height:72px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08); align-items:center; justify-content:center; background:#111}
.social svg{width:40px; height:40px}

/* Hero Bereich */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--primary-border); background:var(--bg);}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:60px 20px;
  display:flex; flex-wrap:wrap; gap:20px;}
.hero-inner > div{flex:1 1 100%}
.kicker{color:var(--accent); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:12px}
h1{margin:10px 0 8px; font-size:42px; line-height:1.1; font-weight:800;
  background:linear-gradient(180deg,var(--primary) 0%, var(--primary-dark) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.sub{font-size:20px; color:var(--primary); margin-bottom:18px}
.moneyline{height:2px; width:100%; background:var(--accent);
  border-radius:2px; margin:14px 0 18px; box-shadow:0 0 18px rgba(230,175,163,.35)}
.hero-card{background:none; border:none; padding:0; color:var(--fg);}
.hero-card h3{margin:0 0 6px; font-size:16px; color:var(--primary)}
.hero-media{border-radius:16px; overflow:hidden}
.hero-media img{max-width:100%; height:auto; object-fit:cover; display:block}

/* Sections */
section{max-width:var(--maxw); margin:0 auto; padding:60px 20px}
.section-title{font-size:32px; margin:0 0 10px; font-weight:800;
  background:linear-gradient(180deg,var(--primary) 0%, var(--primary-dark) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.section-sub{color:#b8b8b8; margin:0 0 22px}

/* Cards für Text */
.cards{display:flex; flex-wrap:wrap; gap:16px}
.card{background:var(--card-2); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; flex:1 1 calc(33.333% - 16px); min-width:260px;}
.card .pad{padding:14px}

/* Bilder ohne Kasten */
.section-image img {
  max-width:300px;
  height:auto;
  display:block;
  margin:30px auto;
  border:none;
  border-radius:0;
  background:none;
}

/* Creators */
#creators {background:var(--bg); border-top:1px solid var(--rose-border); border-bottom:1px solid var(--rose-border);}
#creators .section-title{background:none; color:var(--accent)}

/* Footer */
footer{border-top:1px solid var(--primary-border); margin-top:56px; padding:28px 20px 60px;
  background:var(--bg); color:#cfcfcf}
.foot{max-width:var(--maxw); margin:0 auto; display:grid; gap:14px}

@media (max-width:980px){h1{font-size:32px} .card{flex:1 1 calc(50% - 16px);}}
@media (max-width:600px){h1{font-size:26px} .card{flex:1 1 100%;}}