/* crazypandas.de — Panda-Variante 2: dunkler Kopf im Logo-Verlauf, heller Körper mit weißen Karten. */

:root {
  --pink: #ff4fc3;
  --violett: #8b6bff;
  --blau: #4fd1ff;
  --magenta-licht: #b4128f;
  --blau-licht: #2f5bff;
  --nacht-1: #2a0d3d;
  --nacht-2: #12142a;
  --nacht-3: #0b0c18;
  --hell: #f5f5f8;
  --karte: #ffffff;
  --text: #16181a;
  --text-leise: #5b5f6b;
  --linie: #e6e3ef;
  --akzent-text: #6a2fd6;
  --radius: 14px;
  --breite: 1120px;
  --verlauf-text: linear-gradient(90deg, var(--pink), var(--violett) 55%, var(--blau));
  --verlauf-nacht:
    radial-gradient(circle at 12% 0%, var(--magenta-licht) 0%, transparent 42%),
    radial-gradient(circle at 92% 18%, var(--blau-licht) 0%, transparent 42%),
    linear-gradient(160deg, var(--nacht-1) 0%, var(--nacht-2) 60%, var(--nacht-3) 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--hell);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent-text); }
a:hover { color: var(--violett); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.1rem; }

.verlauf, .schriftzug {
  background: var(--verlauf-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Kopf + Menü ---------- */

.kopf { background: var(--verlauf-nacht); color: #fff; }
.seite-start .kopf { background: transparent; position: absolute; inset: 0 0 auto 0; z-index: 2; }

.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
}

.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marke img {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: 0 0 14px rgba(214, 40, 190, .7);
}
.schriftzug { font-weight: 800; font-size: 1.35rem; letter-spacing: -.5px; filter: drop-shadow(0 0 10px rgba(255, 79, 195, .35)); }

.menue { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.menue a {
  color: #e9e6ff; text-decoration: none; font-size: .95rem;
  padding: 6px 10px; border-radius: 8px;
}
.menue a:hover, .menue a[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; }

@media (min-width: 720px) {
  .marke img { width: 56px; height: 56px; }
  .schriftzug { font-size: 1.6rem; }
}

/* ---------- Startseite: Hero ---------- */

.hero {
  background: var(--verlauf-nacht);
  color: #fff;
  text-align: center;
  padding: 150px 16px 120px;
}
.hero-innen { max-width: 760px; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -1px; }
.unterzeile { color: #d6d0f0; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin: 0 auto 28px; max-width: 620px; }

.hero-aktionen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.btn-primary, .btn-zweit {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 13px 22px; border-radius: 12px; font-size: 1rem;
}
.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, #d6289e, #7b3cff);
  box-shadow: 0 8px 24px rgba(180, 18, 143, .45);
}
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.btn-zweit { color: #fff; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.btn-zweit:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.badge-live { margin: 22px 0 0; font-size: .95rem; color: #d6d0f0; min-height: 1.6em; }
.badge-live[data-state="on"]::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; vertical-align: 1px;
}
.badge-live[data-state="off"], .badge-live[data-state="laedt"] { visibility: hidden; }

/* ---------- Karten, die in den Verlauf ragen ---------- */

.highlights { max-width: var(--breite); margin: -72px auto 0; padding: 0 16px; position: relative; }
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 28px rgba(30, 10, 60, .12);
}
.card h3 { color: var(--akzent-text); }
.card p { margin: 0; color: var(--text-leise); }
.card-icon { font-size: 1.8rem; margin-bottom: 8px; }

/* ---------- Abschnitte ---------- */

.abschnitt { max-width: var(--breite); margin: 0 auto; padding: 56px 16px 8px; }
.abschnitt > p { max-width: 760px; }
.mehr { margin-top: 20px; font-weight: 600; }

.liste-zweispaltig { display: grid; gap: 8px 40px; }
@media (min-width: 720px) { .liste-zweispaltig { grid-template-columns: 1fr 1fr; } }
.liste-zweispaltig ul, .inhalt ul { padding-left: 1.2em; margin: 0 0 1em; }
.liste-zweispaltig li, .inhalt li { margin: .35em 0; }

.anfrage-platz {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 20px; max-width: 760px; box-shadow: 0 6px 18px rgba(30, 10, 60, .06);
}

/* ---------- Inhaltsseiten (Regeln, Join, Team, Rechtliches) ---------- */

.inhalt > * { max-width: 820px; }
.card h2 { font-size: 1.25rem; color: var(--akzent-text); }
.inhalt h2 { margin-top: 1.6em; }

.steps { counter-reset: schritt; list-style: none; padding: 0; }
.steps li { counter-increment: schritt; position: relative; padding: 0 0 12px 46px; }
.steps li::before {
  content: counter(schritt); position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #d6289e, #7b3cff);
}

.wege { display: grid; gap: 16px; }
@media (min-width: 900px) { .wege { grid-template-columns: repeat(3, 1fr); } }
.wege .card p { color: var(--text); }

.hinweis {
  border-left: 4px solid var(--violett); background: #f0ecfd;
  padding: 12px 16px; border-radius: 0 10px 10px 0; max-width: 760px;
}

code {
  background: #ece9f6; border-radius: 6px; padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em;
}

.kacheln { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 760px; margin-top: 16px; }
@media (min-width: 600px) { .kacheln { grid-template-columns: 1fr 1fr; } }
.tile {
  display: block; text-decoration: none; color: var(--text);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 20px; box-shadow: 0 10px 28px rgba(30, 10, 60, .1);
}
.tile strong { display: block; font-size: 1.15rem; color: var(--akzent-text); margin-bottom: 4px; }
.tile span { color: var(--text-leise); }
.tile:hover { border-color: var(--violett); }

.platzhalter { background: #fff4c2; border-radius: 4px; padding: 0 4px; }

/* ---------- Fußzeile ---------- */

.fuss { margin-top: 72px; background: var(--nacht-2); color: #b9b4d4; font-size: .9rem; }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 24px 16px 8px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
.fuss-links { display: flex; gap: 16px; flex-wrap: wrap; }
.fuss a { color: #e3ddff; }
.fuss-hinweis { max-width: var(--breite); margin: 0 auto; padding: 0 16px 24px; font-size: .78rem; color: #8a85a8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.anfrage-platz .klein { font-weight: 400; color: var(--text-leise); font-size: .88rem; margin: 14px 0 0; }