:root {
  --grund: #07070b;
  --flaeche: rgba(255, 255, 255, .06);
  --rand: rgba(255, 255, 255, .12);
  --text: #ffffff;
  --leise: #a9a9bc;
  --cyan: #25f4ee;
  --pink: #fe2c55;
  --gelb: #ffd84d;
  --verlauf: linear-gradient(110deg, var(--cyan), #8a7dff 45%, var(--pink));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: var(--cyan); }
.rahmen { max-width: 46rem; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 1; }

/* Leuchtende Flecken im Hintergrund */
.licht {
  position: fixed; border-radius: 50%; filter: blur(80px); opacity: .55; z-index: 0;
  pointer-events: none; animation: schweben 14s ease-in-out infinite alternate;
}
.licht.eins { width: 22rem; height: 22rem; background: var(--pink); top: -6rem; right: -8rem; }
.licht.zwei { width: 20rem; height: 20rem; background: var(--cyan); top: 18rem; left: -10rem; animation-delay: -6s; }
@keyframes schweben {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2rem, 3rem) scale(1.15); }
}

/* Leiste oben */
.leiste {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
.marke { font-weight: 900; letter-spacing: -.02em; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.marke span { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .08em;
  padding: .35rem .75rem; border-radius: 999px;
  background: rgba(254, 44, 85, .15); color: var(--pink); border: 1px solid rgba(254, 44, 85, .4);
}
.live i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--pink); animation: puls 1.4s infinite; }
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(254, 44, 85, .8); }
  100% { box-shadow: 0 0 0 .7rem rgba(254, 44, 85, 0); }
}

/* Großer Kopf */
.kopf { padding: 3rem 0 2.5rem; }
.kopf h1 {
  font-size: clamp(2.8rem, 13vw, 5.2rem); line-height: .98; letter-spacing: -.045em;
  font-weight: 900; margin: 0 0 1.2rem;
}
.kopf h1 .bunt {
  background: var(--verlauf); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wandern 6s linear infinite;
}
@keyframes wandern { to { background-position: 200% 0; } }
.kopf p { color: var(--leise); font-size: 1.15rem; max-width: 32rem; margin: 0 0 2rem; }

/* Knöpfe */
.knoepfe { display: grid; gap: .8rem; }
.knopf {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.4rem; border-radius: 1rem;
  font-weight: 800; font-size: 1.05rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.knopf svg { width: 1.3rem; height: 1.3rem; flex: none; }
.knopf.voll {
  color: #07070b; background: var(--text);
  box-shadow: -4px -4px 0 var(--cyan), 4px 4px 0 var(--pink);
}
.knopf.rand { color: var(--text); background: var(--flaeche); border: 1px solid var(--rand); }
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: scale(.97); }

/* Laufband */
.band {
  margin: 2.5rem -1rem; padding: .9rem 0; overflow: hidden; white-space: nowrap;
  background: var(--verlauf); transform: rotate(-2deg);
}
.band div { display: inline-block; animation: laufen 18s linear infinite; }
.band span {
  font-weight: 900; font-size: 1.15rem; letter-spacing: .04em; color: #07070b;
  margin: 0 1.2rem; text-transform: uppercase;
}
@keyframes laufen { to { transform: translateX(-50%); } }

/* Abschnitte */
section { padding: 2.5rem 0; }
.etikett {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 .5rem;
}
h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 900; margin: 0 0 1.5rem; }

.karten { display: grid; gap: 1rem; }
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 1.3rem;
  padding: 1.4rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.karte .zeichen {
  width: 2.8rem; height: 2.8rem; border-radius: .9rem; display: grid; place-items: center;
  margin-bottom: .9rem; background: var(--verlauf);
}
.karte .zeichen svg { width: 1.5rem; height: 1.5rem; color: #07070b; }
.karte h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; }
.karte p { margin: 0; color: var(--leise); }

/* Schritte */
.schritte { display: grid; gap: 1rem; counter-reset: schritt; }
.schritt { display: flex; gap: 1rem; align-items: flex-start; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900;
  border: 2px solid var(--cyan); color: var(--cyan);
}
.schritt h3 { margin: .2rem 0 .2rem; font-size: 1.1rem; }
.schritt p { margin: 0; color: var(--leise); }

/* Kooperation */
.kasten {
  border-radius: 1.6rem; padding: 2rem 1.4rem; text-align: center;
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 244, 238, .25), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(254, 44, 85, .3), transparent 55%),
    var(--flaeche);
  border: 1px solid var(--rand);
}
.kasten h2 { margin-bottom: .8rem; }
.kasten p { color: var(--leise); margin: 0 auto 1.6rem; max-width: 30rem; }

/* Fuß */
footer {
  border-top: 1px solid var(--rand); margin-top: 2rem;
  padding: 1.8rem 0 3rem; text-align: center; color: var(--leise); font-size: .95rem;
}
footer a { color: var(--leise); margin: 0 .7rem; text-decoration: none; }
footer a:hover { color: var(--text); }

/* Rechtstexte */
.recht { padding: 2rem 0 3rem; }
.recht h1 { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; }
.recht h2 { font-size: 1.2rem; margin: 1.8rem 0 .4rem; letter-spacing: 0; }
.recht p { color: #d6d6e2; }
.zurueck { display: inline-block; margin-bottom: 1.5rem; font-weight: 700; text-decoration: none; }
.fehlt { background: var(--gelb); color: #07070b; padding: 0 .35rem; border-radius: .3rem; }
.hinweis { color: var(--leise); font-size: .95rem; }

@media (min-width: 42rem) {
  .knoepfe { grid-template-columns: 1fr 1fr; }
  .karten { grid-template-columns: 1fr 1fr; }
  .kasten { padding: 3rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}