:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #15181f; background: #f6f7fb; line-height: 1.6;
}
header.top {
  background: #fff; border-bottom: 1px solid #e3e7ef;
  padding: 16px 24px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 5;
}
header.top .logo { font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: #111; }
header.top .logo span { color: #4f46e5; }
header.top nav { margin-left: auto; display: flex; gap: 18px; }
header.top nav a { color: #5b6472; text-decoration: none; font-size: 14px; font-weight: 600; }
header.top nav a:hover { color: #4f46e5; }
.wrap { max-width: 820px; margin: 0 auto; padding: 40px 24px 60px; }
.hero { text-align: center; padding: 60px 24px 30px; }
.hero h1 { font-size: 38px; letter-spacing: -1px; margin: 0 0 12px; }
.hero p { font-size: 18px; color: #475067; max-width: 640px; margin: 0 auto; }
.badge { display:inline-block; background:#eef0ff; color:#4f46e5; font-weight:700;
  font-size:13px; padding:5px 12px; border-radius:20px; margin-bottom:18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; margin-top: 30px; }
.card { background:#fff; border:1px solid #e3e7ef; border-radius:14px; padding:20px;
  box-shadow:0 4px 16px rgba(20,30,60,.05); }
.card h3 { margin:0 0 8px; font-size:16px; }
.card p { margin:0; font-size:14px; color:#5b6472; }
h1, h2 { letter-spacing: -.3px; }
.wrap h1 { font-size: 30px; margin-bottom: 6px; }
.wrap h2 { font-size: 19px; margin-top: 30px; color:#1f2430; }
.wrap p, .wrap li { font-size: 15px; color: #2b3240; }
.stand { color:#8a93a3; font-size: 13px; margin-bottom: 24px; }
.platzhalter { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  padding:2px 6px; border-radius:5px; font-weight:600; font-size:13px; }
footer { border-top:1px solid #e3e7ef; background:#fff; padding:24px;
  text-align:center; color:#8a93a3; font-size:13px; }
footer a { color:#5b6472; text-decoration:none; margin:0 8px; }
.box { background:#fff; border:1px solid #e3e7ef; border-radius:14px; padding:24px; }
code { background:#eef1f7; padding:2px 6px; border-radius:5px; font-size:13px; }

/* Zugang-fuer-Creator-Abschnitt */
.cta { display:inline-block; background:#4f46e5; color:#fff; font-weight:700;
  padding:10px 22px; border-radius:10px; text-decoration:none; }
.cta:hover { background:#4338ca; }
.hinweis { font-size:14px; color:#5b6472; border-left:3px solid #d8dce6; padding-left:12px; }