/* Marvins KEEPER LAB – Anmeldeseite.
 * Bühne: das Logo gross auf Schwarz, dahinter ein abgedunkeltes Standbild der Halle aus der App.
 * Farben und Schriften wie css/app.css; Rot und Blau stammen aus dem Logo. */
:root {
  color-scheme: dark;
  --ink: #03050C; --surface: #0B1122; --raised: #121A31; --line: #22304F;
  --text: #E9EDF7; --muted: #96A2BF; --blue: #193D7B; --blue-soft: #4C7DE0; --win: #CE3534; --gold: #FCE236;
  --logo-red: #E8131B; --logo-blue: #0A49C8;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; }
html { min-height: 100%; background: var(--ink); }
body { min-height: 100%; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Hintergrund ----------
 * Ebenen von hinten nach vorn: Schwarz (html) → Halle (.hall) → Licht (.veil) → Logo und Anmeldung.
 * Wichtig: .wrap, .hero und .col bilden keine eigene Ebene (kein z-index, kein transform, kein filter),
 * sonst mischt sich das Logo nicht mehr mit dem Hintergrund. */
.hall { position: absolute; z-index: -1; left: 50%; top: 50%; width: 400%; height: auto; max-width: none;
  /* Tor und Torhüter liegen im Bild um den Punkt 56,6 % / 48,5 % und sind 22 % breit: Bei vierfacher Breite der
     Anmeldung verschwinden sie genau dahinter. Sichtbar bleiben Boden, Linien, Bande und die goldene Linie. */
  transform: translate(-56.6%, -48.5%); transform-origin: 56.6% 48.5%; opacity: .95; filter: saturate(1.15); pointer-events: none;
  /* oben und links weich ins Schwarz auslaufen lassen (dort steht das Logo) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 27%), linear-gradient(to right, transparent 0, #000 17%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 3%, #000 27%), linear-gradient(to right, transparent 0, #000 17%); mask-composite: intersect;
  animation: hall 1.6s .1s var(--ease) both, schwenk 34s 1.2s ease-in-out infinite alternate; }
@keyframes hall { from { opacity: 0; } }
/* Die Halle schwenkt ganz leicht um die Anmeldung, wie die Kamera auf «Heute» in der App.
   Drehpunkt ist das Tor hinter der Anmeldung: Es bleibt verdeckt, nur Boden und Bande wandern. */
@keyframes schwenk {
  from { transform: translate(-56.9%, -48.7%) rotate(-.55deg) scale(1); }
  to { transform: translate(-56.3%, -48.3%) rotate(.55deg) scale(1.03); }
}
.veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(46% 48% at 30% 47%, rgba(3, 5, 12, .88) 0, rgba(3, 5, 12, .66) 55%, rgba(3, 5, 12, 0) 100%),
  radial-gradient(40% 55% at 0% 60%, rgba(232, 19, 27, .16), rgba(232, 19, 27, 0) 70%),
  radial-gradient(46% 60% at 100% 30%, rgba(10, 73, 200, .26), rgba(10, 73, 200, 0) 72%),
  linear-gradient(180deg, rgba(3, 5, 12, .9) 0, rgba(3, 5, 12, .5) 30%, rgba(3, 5, 12, .14) 66%, rgba(3, 5, 12, .34) 100%); }

/* ---------- Aufbau ---------- */
.wrap { min-height: 100vh; min-height: 100dvh; overflow: hidden; display: grid; align-items: center; justify-items: center;
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, 440px); gap: clamp(20px, 3.4vw, 56px);
  padding: calc(24px + var(--safe-t)) max(clamp(20px, 4vw, 56px), calc((100vw - 1320px) / 2)) calc(24px + var(--safe-b)); }
.col { position: relative; width: 100%; }
.hero { width: 100%; display: grid; place-items: center; }
/* Das Logo hat schwarzen Grund: «screen» lässt das Schwarz verschwinden und das Leuchten stehen */
.logo { display: block; width: 100%; max-width: 760px; height: auto; mix-blend-mode: screen; animation: logo .9s .15s var(--ease) both; }
@keyframes logo { from { opacity: 0; transform: translateY(10px) scale(.965); } }

/* ---------- Anmeldung ---------- */
.box { width: 100%; display: grid; gap: 20px; padding: 26px 24px 24px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(14, 21, 40, .86), rgba(8, 12, 26, .9)); border: 1px solid rgba(120, 145, 200, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); animation: up .6s .3s var(--ease) both; }
/* schmale Lichtkante oben in den Farben des Logos */
.box::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--logo-red), #fff 50%, var(--logo-blue)); opacity: .9; }
.box { position: relative; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }

.head { display: grid; gap: 4px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: .005em; }
h1 .dot { color: var(--gold); }

form { display: grid; gap: 16px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { position: relative; display: block; cursor: pointer; --c: var(--logo-red); }
.role--coach { --c: var(--blue-soft); }
.role input { position: absolute; opacity: 0; inset: 0; }
.role__in { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; min-height: 100px; padding: 14px 14px 12px; border-radius: 13px; background: rgba(18, 26, 49, .82); border: 1px solid var(--line); overflow: hidden;
  transition: border-color .2s, background-color .2s, transform .15s var(--ease), box-shadow .2s; }
.role__in::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: .55; transition: opacity .2s, width .2s; }
.role__in b { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.role__in small { font-size: 13px; line-height: 1.3; color: var(--muted); }
.role input:checked + .role__in { border-color: var(--gold); background: rgba(252, 226, 54, .07); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(0, 0, 0, .35); }
.role input:checked + .role__in::before { opacity: 1; width: 4px; }
.role input:focus-visible + .role__in { outline: 2px solid var(--gold); outline-offset: 2px; }
.role:active .role__in { transform: scale(.985); }

.field { display: grid; gap: 6px; }
.field > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.field__row { position: relative; display: block; }
.field input { width: 100%; min-height: 54px; padding: 10px 52px 10px 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(3, 5, 12, .8); color: var(--text); font: inherit; font-size: 18px; letter-spacing: .02em; }
.field input:focus { outline: none; border-color: var(--blue-soft); box-shadow: 0 0 0 3px rgba(76, 125, 224, .28); }
.eye { position: absolute; right: 5px; top: 5px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.eye[aria-pressed="true"] { color: var(--gold); }

.msg { min-height: 22px; font-size: 14px; color: #ff9a99; }
.msg.is-info { color: var(--muted); }
.go { min-height: 56px; border: 0; border-radius: 11px; background: var(--gold); color: #16130a; font: inherit; font-weight: 600; font-size: 18px; cursor: pointer;
  box-shadow: 0 8px 26px rgba(252, 226, 54, .24); transition: transform .15s var(--ease), opacity .2s, box-shadow .2s; }
.go:hover:not(:disabled) { box-shadow: 0 10px 32px rgba(252, 226, 54, .34); }
.go:active { transform: scale(.985); }
.go:disabled { opacity: .55; cursor: default; }
.box.is-wrong { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }

/* ---------- Hochformat und Handy: Logo oben, Anmeldung darunter ---------- */
@media (max-width: 899px), (orientation: portrait) {
  .wrap { grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(8px, 2.4vh, 28px); padding-inline: 18px; }
  .logo { max-width: min(560px, 100%, 46vh * 1.5); }
  .col { max-width: 460px; }
  .veil { background:
    radial-gradient(95% 30% at 50% 24%, rgba(3, 5, 12, .9) 0, rgba(3, 5, 12, .7) 55%, rgba(3, 5, 12, 0) 100%),
    radial-gradient(60% 34% at 0% 30%, rgba(232, 19, 27, .16), rgba(232, 19, 27, 0) 70%),
    radial-gradient(60% 34% at 100% 16%, rgba(10, 73, 200, .26), rgba(10, 73, 200, 0) 72%),
    linear-gradient(180deg, rgba(3, 5, 12, .9) 0, rgba(3, 5, 12, .5) 40%, rgba(3, 5, 12, .22) 100%); }
}
@media (max-width: 380px) { h1 { font-size: 32px; } .role__in { min-height: 0; } .box { padding: 22px 18px 20px; } }
/* niedrige Querformate (Handy quer): Logo kleiner, damit die Anmeldung ohne Scrollen Platz hat */
@media (orientation: landscape) and (max-height: 560px) {
  .wrap { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); padding-block: calc(10px + var(--safe-t)) calc(10px + var(--safe-b)); }
  .box { gap: 10px; padding: 16px 18px; } form { gap: 10px; } .role__in { min-height: 0; padding-block: 10px; } .role__in small { display: none; } h1 { font-size: 28px; }
  .field input { min-height: 46px; } .eye { top: 1px; } .msg { min-height: 0; } .go { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .logo, .box, .hall, .box.is-wrong { animation: none; } }