/* ============================================================
   02-anmeldefenster.css — Anmelde-Popup samt Formular

   Wortgleich aus src/styles/pages/webinar.css uebernommen (dort Zeilen
   454 bis 738, Stand 24.09.2026), damit die neue Anmeldeseite
   /bathmaster-live dasselbe Fenster zeigt wie der laufende Funnel.

   Warum kopiert und nicht aus webinar.css geladen: webinar.css hat 1452
   Zeilen, davon gehoeren rund 1170 zum Aufbau der Basenbaden-Seite. Und
   warum webinar.css nicht auf diese Datei umgestellt wurde: die Seiten
   des laufenden Funnels tragen gerade Anzeigenbudget. Ein Umbau ihres
   Stylesheets gehoert nicht in denselben Schritt wie eine neue Seite.

   ⚠ Wer hier etwas aendert, muss entscheiden, ob es auch in webinar.css
   gehoert. Die beiden Faelle sind bis auf Weiteres getrennt zu pflegen.
   Wird der Funnel spaeter umgestellt, ersetzt diese Datei den Block dort.
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(2, 14, 22, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: modal-backdrop-in 240ms ease forwards;
}
.modal[hidden] { display: none; }

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Card ────────────────────────────────────────────────── */
.modal__content {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
  border-radius: clamp(20px, 2.2vw, 28px);
  color: var(--text-body);
  text-align: center;
  background:
    /* Crown-Streifen oben: Orange -> Cyan */
    linear-gradient(90deg, var(--accent) 0%, var(--primary-500) 100%) top / 100% 4px no-repeat,
    /* Diagonal-Gradient: warme Creme oben-links -> kuehles Blue-White unten-rechts */
    linear-gradient(135deg,
      rgba(255, 244, 232, 0.80) 0%,
      rgba(255, 255, 255, 1.00) 45%,
      rgba(247, 251, 252, 1.00) 100%);
  box-shadow:
    0 2px 8px rgba(0, 30, 50, 0.18),
    0 40px 80px rgba(0, 60, 80, 0.38),
    0 14px 36px rgba(0, 78, 106, 0.22);
  animation: modal-card-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Licht-Akzent oben rechts */
.modal__content::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127, 219, 238, 0.45), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

@keyframes modal-card-in {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ── Close-Button ────────────────────────────────────────── */
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(10, 41, 51, 0.12);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 260ms ease,
    color 260ms ease,
    background 260ms ease,
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}
.modal__close:hover {
  border-color: var(--primary-500);
  color: var(--primary-500);
  background: rgba(18, 179, 216, 0.08);
  transform: rotate(90deg);
}
.modal__close:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 3px;
}

/* ── States ──────────────────────────────────────────────── */
.signup-form__state { text-align: center; position: relative; }

.signup-form__state--form .section-label {
  display: inline-flex;
  justify-content: center;
}
.signup-form__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--near-black);
  margin-block: var(--space-5) var(--space-3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.signup-form__intro {
  color: var(--text-body);
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
  line-height: 1.55;
  max-width: 38ch;
  margin-inline: auto;
}

/* ── Form ────────────────────────────────────────────────── */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}
.signup-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 2px; /* Platz fuer Focus-Underline */
}
.signup-form__label {
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 220ms ease;
}
.signup-form__label em {
  font-style: normal;
  color: var(--accent);
}
/* Optional-Hinweis (Telefon): zurückhaltend, nicht versalisiert */
.signup-form__optional {
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.72;
}
/* Focus ODER gefüllt → Label cyan */
.signup-form__field:focus-within .signup-form__label,
.signup-form__field:has(input:not(:placeholder-shown)) .signup-form__label {
  color: var(--primary-500);
}

.signup-form__field input {
  padding: 14px 16px;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--near-black);
  background: rgba(215, 240, 247, 0.28);
  transition: background 220ms ease, border-color 220ms ease;
  width: 100%;
  box-sizing: border-box;
}
.signup-form__field input:hover { background: rgba(215, 240, 247, 0.40); }
.signup-form__field input:focus {
  outline: none;
  background: rgba(215, 240, 247, 0.48);
}
.signup-form__field input[aria-invalid="true"] {
  background: rgba(242, 100, 25, 0.08);
}
.signup-form__field input::placeholder { color: transparent; }

/* Focus-Underline: expandiert von Mitte */
.signup-form__field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
  transition: left 320ms cubic-bezier(0.22, 1, 0.36, 1), right 320ms cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 1px;
  pointer-events: none;
}
.signup-form__field:focus-within::after {
  left: 8%;
  right: 8%;
}

.signup-form__submit {
  margin-top: var(--space-3);
  width: 100%;
}
.signup-form__submit[aria-busy="true"] { animation: submit-pulse 1.2s ease-in-out infinite; }
@keyframes submit-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); }
}

/* ── Privacy mit Schloss-Icon ───────────────────────────── */
.signup-form__privacy {
  font-size: 0.78rem;
  color: #6B7A7E;
  line-height: 1.5;
  text-align: center;
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 42ch;
  margin-inline: auto;
}
.signup-form__privacy strong { color: var(--near-black); font-weight: var(--weight-semibold); }
.signup-form__privacy-icon { color: var(--primary-500); flex-shrink: 0; }

/* ── Success-State ───────────────────────────────────────── */
.signup-form__success-icon {
  color: var(--primary-500);
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 0 18px rgba(18, 179, 216, 0.28));
}
.signup-form__zoom-link { width: 100%; margin-block: var(--space-4) var(--space-4); }

/* ── Error-State ─────────────────────────────────────────── */
.signup-form__state--error .signup-form__title { color: var(--accent-dark); }
.signup-form__retry { width: 100%; margin-top: var(--space-4); }

/* ── Entrance: Staggered Content ─────────────────────────── */
.signup-form__state--form > * {
  opacity: 0;
  transform: translateY(8px);
  animation: form-content-in 380ms var(--anim-ease) forwards;
}
.signup-form__state--form > *:nth-child(1) { animation-delay: 120ms; }  /* Section-Label */
.signup-form__state--form > *:nth-child(2) { animation-delay: 200ms; }  /* Title */
.signup-form__state--form > *:nth-child(3) { animation-delay: 260ms; }  /* Intro */
.signup-form__state--form > *:nth-child(4) { animation-delay: 320ms; }  /* Form */

@keyframes form-content-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Mobile: Popup fast Vollbild ─────────────────────────── */
@media (max-width: 640px) {
  .modal { padding: var(--space-3); align-items: flex-end; }
  .modal__content {
    padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 28px);
    max-height: calc(100vh - var(--space-4));
  }
  .modal__content::before { width: 180px; height: 180px; top: -30px; right: -30px; }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal__content,
  .signup-form__state--form > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .modal__close,
  .signup-form__field input,
  .signup-form__label,
  .signup-form__field::after { transition: none; }
  .modal__close:hover { transform: none; }
  .signup-form__submit[aria-busy="true"] { animation: none; }