/* Abi-Treffen 2026 „Abikalypse" — dunkles, modernes Design, ohne externe Ressourcen */
:root {
  --bg: #0d0d10;
  --bg-card: #17171c;
  --bg-card2: #1e1e25;
  --line: #2c2c36;
  --text: #ececf1;
  --muted: #a3a3b2;
  --red: #ff2d2d;
  --red-soft: #ff6b57;
  --ok: #4ade80;
  --warn: #fbbf24;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
a { color: var(--red-soft); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--red-soft); outline-offset: 2px;
}

/* ---------------- Hero ---------------- */
.hero {
  text-align: center;
  padding: 48px 0 36px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 45, 45, .22), transparent 70%),
    radial-gradient(ellipse 45% 35% at 50% 8%, rgba(255, 120, 60, .12), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero .kicker {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  color: var(--muted);
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  text-shadow:
    0 0 8px rgba(255, 45, 45, .9),
    0 0 24px rgba(255, 45, 45, .6),
    0 0 60px rgba(255, 60, 30, .45),
    0 0 120px rgba(255, 80, 30, .3);
  animation: glow 2.8s ease-in-out infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 8px rgba(255,45,45,.85), 0 0 22px rgba(255,45,45,.55), 0 0 55px rgba(255,60,30,.4), 0 0 110px rgba(255,80,30,.25); }
  to   { text-shadow: 0 0 14px rgba(255,45,45,1), 0 0 36px rgba(255,45,45,.75), 0 0 80px rgba(255,60,30,.55), 0 0 150px rgba(255,80,30,.4); }
}
@media (prefers-reduced-motion: reduce) { .hero h1 { animation: none; } }
.hero .sub { margin: 10px 0 26px; color: var(--muted); font-size: 1.1rem; }

.facts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fact {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 20px;
  min-width: 180px;
}
.fact span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--red-soft); }
.fact strong { display: block; font-size: 1.05rem; margin-top: 2px; }
.fact em { display: block; font-style: normal; color: var(--muted); font-size: .9rem; }

/* ---------------- Cards ---------------- */
main { padding: 28px 16px 8px; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 18px;
  margin-bottom: 24px;
}
.card h2 { margin: 0 0 12px; font-size: 1.35rem; }
.prewrap { white-space: pre-line; }
.muted { color: var(--muted); font-size: .92rem; }

/* ---------------- Statistik ---------------- */
.stats { display: flex; gap: 12px; justify-content: space-around; text-align: center; flex-wrap: wrap; }
.stat { flex: 1; min-width: 120px; padding: 8px; }
.stat strong { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1.2; }
.stat span { color: var(--muted); text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; }
.stat.ok strong { color: var(--ok); }
.stat.no strong { color: var(--red-soft); }

/* ---------------- Formular ---------------- */
fieldset { border: none; margin: 0 0 14px; padding: 0; }
legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.choice { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
.pill:has(input:checked) { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 14px rgba(255,45,45,.35); }
.pill input { accent-color: var(--red); }
label { font-weight: 600; }
label em { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input:not([type]), textarea, select {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
  margin-top: 4px;
}
small { color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }
.req { color: var(--red-soft); }
.checkline label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.checkline input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--red); flex-shrink: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button {
  background: linear-gradient(180deg, var(--red), #c81e1e);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255,45,45,.35);
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .6; cursor: wait; }
.errors {
  background: rgba(255,45,45,.12);
  border: 1px solid var(--red);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.errors ul { margin: 6px 0 0; padding-left: 20px; }
.warnbox { background: rgba(251,191,36,.1); border: 1px solid var(--warn); border-radius: 10px; padding: 10px 14px; }
.warn { color: var(--warn); }
.success { border-color: var(--ok); }
.success .code {
  font: 700 1.9rem/1.3 ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--ok);
  letter-spacing: .08em;
  background: var(--bg-card2);
  border: 1px dashed var(--ok);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.privacynote {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: .92rem;
  color: var(--muted);
  margin: 0 0 24px;
}
.privacynote strong { color: var(--text); }
.venue {
  background: var(--bg-card2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 16px;
  margin-bottom: 14px;
}
.foot { text-align: center; color: var(--muted); padding-bottom: 28px; font-size: .9rem; }
.foot a { color: var(--muted); }