/* =====================================================================
   Astromantie · Anmelden, Registrieren und die weiteren Anmeldeseiten im Browser (10.10.2026, Freigabe Tobias)
   Das lila Universum der Startseite, eine hochwertige Formular-Karte und moderne Felder. Nur Gestaltung: Felder,
   Kennungen und Ablaeufe (account.js, Google-Anmeldung, Code per E-Mail) bleiben unveraendert. Die App bekommt diese
   Datei nicht (body.au-web wird nur ohne App-Kennung gesetzt). Am Computer links die Begruessungsspalte
   (inc/auth-web-seite.php), am Handy nur Logo und Formular.
   ===================================================================== */
@property --au-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

body.au-web { background: #0b0618; }
body.au-web .astro-login-page {
  --au-gold: #e8c96a;
  --au-gold-hell: #f6e3a1;
  --au-text: #f5f0ff;
  --au-mittel: rgba(236, 228, 255, 0.74);
  --au-leise: rgba(236, 228, 255, 0.52);
  --au-rand: rgba(255, 255, 255, 0.09);
  --au-weich: cubic-bezier(.2, .7, .2, 1);
  min-height: 100vh;
  padding: 48px 0;
  color: var(--au-text);
  background: radial-gradient(55% 60% at 74% 30%, rgba(118, 64, 214, 0.34), rgba(118, 64, 214, 0) 70%),
              radial-gradient(42% 50% at 12% 80%, rgba(170, 80, 210, 0.18), rgba(170, 80, 210, 0) 70%),
              radial-gradient(60% 30% at 50% 100%, rgba(232, 201, 106, 0.07), rgba(232, 201, 106, 0) 70%),
              linear-gradient(180deg, #06030d 0%, #0f0724 42%, #120827 70%, #0b0618 100%);
}
body.au-web .astro-login-glow { filter: blur(90px); }
body.au-web .astro-login-glow-1 { top: 6%; left: 8%; width: 420px; height: 420px; background: rgba(118, 64, 214, 0.22); }
body.au-web .astro-login-glow-2 { bottom: 4%; right: 6%; width: 380px; height: 380px; background: rgba(232, 201, 106, 0.07); }

/* ---------- Aufbau: am Computer zwei Spalten ---------- */
body.au-web .astro-login-container { max-width: 480px; padding: 24px; text-align: center; }
body.au-web .astro-login-logo { margin-bottom: 28px; }
body.au-web .astro-login-logo img { height: 112px; }
body.au-web .astro-login-logo-sub { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; color: var(--au-gold); text-shadow: 0 0 18px rgba(232, 201, 106, 0.4); }
body.au-web .au-seite { display: none; }
@media (min-width: 1000px) {
  body.au-web .astro-login-container { display: grid; grid-template-columns: minmax(0, 1fr) 480px; grid-template-areas: "logo karte" "seite karte" "seite zurueck"; grid-template-rows: auto 1fr auto; column-gap: 72px; align-items: start; max-width: 1160px; padding: 24px 40px; text-align: left; }
  body.au-web .astro-login-logo { grid-area: logo; margin: 0 0 6px; text-align: left; }
  body.au-web .astro-login-logo img { height: 96px; margin: 0; }
  body.au-web .astro-login-logo-sub { display: none; }
  body.au-web .au-seite { grid-area: seite; display: block; padding-top: 22px; }
  body.au-web .astro-login-card { grid-area: karte; align-self: center; }
  body.au-web .astro-auth-back-link { grid-area: zurueck; justify-self: center; }
}
body.au-web .au-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--au-gold); text-shadow: 0 0 18px rgba(232, 201, 106, 0.4); }
body.au-web .au-kicker::before { content: '✦'; }
body.au-web .au-titel { margin: 18px 0 18px; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(2.4rem, 3.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.018em; color: #fbf7ff; text-wrap: balance; }
body.au-web .au-titel em { font-style: italic; padding-right: 0.08em; background: linear-gradient(110deg, #c9b6ff 0%, #e8c96a 55%, #fbe9b0 75%, #c9b6ff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: au-schimmer 10s ease-in-out infinite; }
body.au-web .au-lead { margin: 0 0 26px; max-width: 30em; font-size: 1.08rem; line-height: 1.7; color: var(--au-mittel); }
body.au-web .au-vorteile { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
body.au-web .au-vorteile li { display: flex; gap: 12px; align-items: baseline; margin: 0; font-size: 15px; color: #e8e0f8; }
body.au-web .au-vorteile li::before { content: '✦'; flex: none; font-size: 12px; color: var(--au-gold); text-shadow: 0 0 10px rgba(232, 201, 106, 0.7); }
body.au-web .au-app { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; border-radius: 18px; text-decoration: none; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(232, 201, 106, 0.32); transition: border-color 0.3s, transform 0.3s var(--au-weich); }
body.au-web .au-app:hover { border-color: rgba(232, 201, 106, 0.7); transform: translateY(-2px); }
body.au-web .au-app b { display: block; font-size: 14.5px; color: #fff; }
body.au-web .au-app small { font-size: 12.5px; color: var(--au-leise); }
body.au-web .au-app-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid rgba(232, 201, 106, 0.6); background: radial-gradient(circle at 50% 50%, #e7b94f 0 8px, rgba(231, 200, 120, 0.25) 9px, transparent 15px), radial-gradient(125% 80% at 50% -8%, #2c2168, #0d0a26); box-shadow: 0 0 18px rgba(232, 201, 106, 0.2); }

/* ---------- Karte ---------- */
body.au-web .astro-login-card { position: relative; padding: 42px 40px 34px; border-radius: 28px; text-align: left;
  background: linear-gradient(180deg, rgba(31, 22, 66, 0.96), rgba(20, 13, 44, 0.97)); border: 1px solid rgba(232, 201, 106, 0.3);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 70px -20px rgba(109, 40, 217, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
body.au-web .astro-login-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--au-w), rgba(232, 201, 106, 0), rgba(251, 233, 176, 0.85), rgba(232, 201, 106, 0) 30%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: au-umlauf 8s linear infinite; }
body.au-web .astro-login-title { margin: 0 0 8px; font-family: 'Fraunces', serif; font-weight: 400; font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; text-align: left; color: #fbf7ff; }
body.au-web .astro-login-subtitle { margin: 0 0 28px; font-size: 15px; line-height: 1.6; text-align: left; color: var(--au-leise); }

/* ---------- Felder ---------- */
body.au-web .astro-login-card .astro-form-group { margin-bottom: 18px; }
body.au-web .astro-login-card .astro-form-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--au-mittel); }
body.au-web .astro-login-card :is(.astro-form-input, .astro-form-select) { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(206, 186, 255, 0.2); background: #0e0922; color: #fff; font-size: 15.5px; color-scheme: dark; box-shadow: none; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; }
body.au-web .astro-login-card :is(.astro-form-input, .astro-form-select)::placeholder { color: rgba(236, 228, 255, 0.32); }
body.au-web .astro-login-card :is(.astro-form-input, .astro-form-select):hover { border-color: rgba(206, 186, 255, 0.34); }
body.au-web .astro-login-card :is(.astro-form-input, .astro-form-select):focus { outline: none; border-color: rgba(232, 201, 106, 0.7); background: #110b2a; box-shadow: 0 0 0 4px rgba(232, 201, 106, 0.12); }
body.au-web .astro-login-card .astro-pw-wrap .astro-form-input { padding-right: 52px; }
body.au-web .astro-login-card .astro-pw-eye { right: 8px; width: 38px; height: 38px; border-radius: 10px; color: var(--au-leise); }
body.au-web .astro-login-card .astro-pw-eye:hover { color: var(--au-gold-hell); }
body.au-web .astro-login-card .astro-form-error { font-size: 12.5px; }
body.au-web .astro-login-card .astro-form-hint, body.au-web .astro-login-card .astro-form-optional { color: var(--au-leise); }
body.au-web .astro-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 24px; font-size: 14px; color: var(--au-mittel); }
body.au-web .astro-checkbox-custom { border-radius: 6px; border-color: rgba(206, 186, 255, 0.35); background: #0e0922; }
body.au-web .astro-checkbox:checked + .astro-checkbox-custom { border-color: var(--au-gold); background: rgba(232, 201, 106, 0.18); }
body.au-web .astro-login-forgot, body.au-web .astro-link-accent, body.au-web .astro-login-mode-switch, body.au-web .astro-login-code-resend { color: var(--au-gold-hell); font-weight: 600; text-decoration: none; }
body.au-web .astro-login-forgot:hover, body.au-web .astro-link-accent:hover, body.au-web .astro-login-mode-switch:hover { color: #fff; }

/* ---------- Knopf ---------- */
body.au-web .astro-login-card .astro-btn-primary { width: 100%; min-height: 54px; border: 1.5px solid transparent; border-radius: 999px; font-size: 15.5px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: #fff; text-shadow: 0 1px 2px rgba(30, 10, 60, 0.35);
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%) padding-box, conic-gradient(from var(--au-w), #a87a22, #fbe9b0, #e8c96a, #a87a22, #fbe9b0, #a87a22) border-box;
  box-shadow: 0 16px 40px -14px rgba(124, 58, 237, 0.95), 0 0 24px rgba(232, 201, 106, 0.16); animation: au-umlauf 6s linear infinite; transition: transform 0.3s var(--au-weich), box-shadow 0.3s; }
body.au-web .astro-login-card .astro-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 52px -14px rgba(124, 58, 237, 1), 0 0 36px rgba(232, 201, 106, 0.38); }
body.au-web .astro-login-card .astro-btn-secondary { border-radius: 999px; }
body.au-web .astro-login-mode-switch { display: block; width: 100%; margin-top: 14px; padding: 6px; border: 0; background: none; font-size: 14px; text-align: center; cursor: pointer; }

/* ---------- ODER, Google und Apple ---------- */
body.au-web .astro-login-divider { margin: 26px 0 20px; }
body.au-web .astro-login-divider span { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: var(--au-leise); background: none; }
body.au-web .astro-social-login { gap: 12px; }
body.au-web .astro-google-start, body.au-web .astro-social-btn { height: 50px; border-radius: 14px; border: 1px solid rgba(206, 186, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 14.5px; font-weight: 600; transition: border-color 0.25s, background 0.25s; }
body.au-web .astro-google-start:hover, body.au-web .astro-social-btn:hover { border-color: rgba(232, 201, 106, 0.6); background: rgba(232, 201, 106, 0.06); }
body.au-web .astro-login-register-hint { margin: 24px 0 0; font-size: 14.5px; text-align: center; color: var(--au-mittel); }
body.au-web .astro-login-trust-inline { justify-content: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--au-rand); font-size: 12.5px; color: var(--au-leise); }
body.au-web .astro-login-trust-inline svg { color: var(--au-gold); }
body.au-web .astro-auth-back-link { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--au-mittel); text-decoration: none; }
body.au-web .astro-auth-back-link:hover { color: var(--au-gold-hell); }

/* ---------- Registrierung: laengeres Formular ---------- */
body.au-web .astro-register-card .astro-password-strength { margin-top: 10px; }
body.au-web .astro-register-card .astro-pw-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
body.au-web .astro-register-card .astro-pw-bar-fill { border-radius: 5px; }
body.au-web .astro-register-card .astro-time-sep { color: var(--au-leise); }
body.au-web .astro-login-page .astro-place-suggestions { border-radius: 14px; border: 1px solid rgba(232, 201, 106, 0.3); background: #140d2e; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); overflow: hidden; }

/* Schrift: Ueberschriften in Fraunces, auch gegen die Schriftebene der Website */
@layer astromantieTypography {
  html body.au-web :is(.au-titel, .astro-login-title) { font-family: 'Fraunces', serif !important; }
}

@keyframes au-schimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes au-umlauf { to { --au-w: 360deg; } }

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  body.au-web .astro-login-page { padding: 28px 0 36px; align-items: flex-start; }
  body.au-web .astro-login-container { padding: 16px; }
  body.au-web .astro-login-logo { margin-bottom: 20px; }
  body.au-web .astro-login-logo img { height: 92px; }
  body.au-web .astro-login-card { padding: 30px 20px 26px; border-radius: 22px; }
  body.au-web .astro-login-title { font-size: 1.7rem; }
  body.au-web .astro-login-subtitle { font-size: 14.5px; margin-bottom: 22px; }
  body.au-web .astro-login-card :is(.astro-form-input, .astro-form-select) { font-size: 16px; }
  body.au-web .astro-login-options { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { body.au-web .astro-login-page *, body.au-web .astro-login-page *::before { animation: none !important; transition: none !important; } }