/* ==========================================================================
   Zutritt · Einladung · Einmal-Link
   Bühne: ein lebendes Zifferblatt (WebGL-Sonnenschliff + SVG-Zeiger mit Ortszeit).
   ========================================================================== */

.auth { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow-x: hidden; background: var(--night); }

.auth__canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Rückfall ohne WebGL: gemalter Sonnenschliff */
.auth__canvas.is-fallback, .no-js .auth__canvas {
  background:
    radial-gradient(circle at 30% 50%, transparent 0 22rem, rgba(3, 23, 15, .82) 34rem),
    conic-gradient(from 35deg at 30% 50%, #03170f, #0a5a38 12%, #03170f 25%, #06442b 37%, #03170f 50%, #0a5a38 62%, #03170f 75%, #06442b 87%, #03170f);
}
.auth__veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3, 23, 15, 0) 38%, rgba(3, 23, 15, .78) 66%, rgba(3, 23, 15, .94) 100%); }

.auth__head, .auth__main, .auth__foot { position: relative; z-index: 2; }
.auth__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 2.25rem) var(--gutter); }
.auth__head .pill .icon { width: .85rem; height: .85rem; }

.auth__main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: 1rem var(--gutter) 2rem; max-width: 1560px; width: 100%; margin-inline: auto; }

.auth__dial { display: grid; place-items: center; min-width: 0; }
.dial { width: min(100%, 39rem, 72svh); aspect-ratio: 1; position: relative; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.auth__panel { min-width: 0; display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 30rem; }
.auth-card .eyebrow { margin-bottom: 1.75rem; }
.auth-card__lead { margin-top: 1.5rem; font-size: 1.0625rem; max-width: 30em; }
.auth-card .cluster { margin-top: 2.25rem; }

.auth-form { display: grid; gap: 1.35rem; margin-top: 2.5rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); border-radius: 20px; position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(234, 219, 180, .16), 0 40px 90px -40px rgba(0, 0, 0, .75); }
.auth-form::before { content: ""; position: absolute; left: 2rem; right: 2rem; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: .8; }
.auth-form .input { background: rgba(3, 23, 15, .55); border-color: rgba(249, 247, 244, .16); }
.auth-form .input:focus { background: rgba(3, 23, 15, .8); }
.auth-form .btn { margin-top: .4rem; }
.auth-form__fixed { display: flex; align-items: center; gap: .7rem; font-size: 1rem; color: var(--champagne); padding: .2rem 0; overflow-wrap: anywhere; }
.auth-form__fixed .icon { width: 1.1rem; height: 1.1rem; color: var(--gold-soft); }

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 3.4rem; }
.input-wrap__btn { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; color: var(--fg-mute); transition: color .3s, background-color .3s; }
.input-wrap__btn:hover, .input-wrap__btn[aria-pressed="true"] { color: var(--champagne); background: rgba(234, 219, 180, .08); }

.auth-error { display: flex; gap: .8rem; align-items: flex-start; margin-top: 2rem; padding: .95rem 1.1rem; border-radius: 12px; font-size: .9375rem; line-height: 1.45; color: #ffd9d2; background: rgba(188, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(255, 140, 120, .35); }
.auth-error .icon { width: 1.1rem; height: 1.1rem; margin-top: .12rem; color: #ff9d8c; }
.auth-error + .auth-form { margin-top: 1.25rem; }

.auth-card__help { margin-top: 2rem; display: grid; gap: .8rem; font-size: var(--fs-small); color: var(--fg-soft); line-height: 1.55; }
.auth-card__help strong { color: var(--fg); font-weight: 600; }
.auth-card__note { margin-top: 1.5rem; }

.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; align-items: center; }
.strength i { height: 3px; border-radius: 2px; background: rgba(249, 247, 244, .14); transition: background-color .4s; }
.strength span { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--fg-mute); margin-top: .25rem; }
.strength[data-level="1"] i:nth-child(-n+1) { background: #e0705f; }
.strength[data-level="2"] i:nth-child(-n+2) { background: #e3ad4a; }
.strength[data-level="3"] i:nth-child(-n+3) { background: var(--gold-soft); }
.strength[data-level="4"] i:nth-child(-n+4) { background: var(--ocean); }

.auth__foot { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; padding: 1.25rem var(--gutter) 1.5rem; font-size: var(--fs-xs); color: rgba(249, 247, 244, .5); border-top: 1px solid rgba(249, 247, 244, .07); }

/* ------------------------------------------------------------------ Zifferblatt (SVG) */
.dial__tick { stroke: rgba(249, 247, 244, .5); stroke-width: .5; }
.dial__tick--5 { stroke: rgba(249, 247, 244, .85); stroke-width: .9; }
.dial__index { fill: url(#dial-gold); stroke: rgba(3, 23, 15, .45); stroke-width: .25; }
.dial__lume { fill: rgba(249, 247, 244, .92); }
.dial__text { font-family: var(--sans); font-weight: 600; fill: rgba(249, 247, 244, .9); letter-spacing: .34em; text-anchor: middle; }
.dial__text--brand { font-size: 5.2px; }
.dial__text--sub { font-size: 2.6px; letter-spacing: .4em; fill: rgba(234, 219, 180, .85); }
.dial__text--low { font-size: 2.35px; letter-spacing: .38em; fill: rgba(249, 247, 244, .6); }
.dial__date rect { fill: var(--paper); stroke: url(#dial-gold); stroke-width: .7; }
.dial__date text { font-family: var(--sans); font-weight: 700; font-size: 6.2px; fill: var(--ink); text-anchor: middle; letter-spacing: 0; }
.dial__hand { fill: url(#dial-gold); stroke: rgba(3, 23, 15, .5); stroke-width: .25; filter: drop-shadow(0 .8px 1.2px rgba(0, 0, 0, .55)); }
.dial__hand-lume { fill: rgba(249, 247, 244, .94); }
.dial__second { stroke: var(--champagne); stroke-width: .55; stroke-linecap: round; filter: drop-shadow(0 .8px 1px rgba(0, 0, 0, .5)); }
.dial__second-dot { fill: var(--champagne); }
.dial__cap { fill: url(#dial-gold); stroke: rgba(3, 23, 15, .5); stroke-width: .3; }
.dial__ring { fill: none; stroke: rgba(249, 247, 244, .16); stroke-width: .3; }

/* Die Einblendung liegt auf dem SVG im Blatt, nicht auf .dial selbst: Der Shader misst die Box von .dial,
   und die muss von der ersten Messung an endgültig sein. Eine Drehung/Skalierung auf .dial hätte die gemessene
   Box um rund 6 % vergrößert – das Sonnenschliff-Blatt wäre beim Nachmessen sichtbar gesprungen. */
.js .dial > svg { opacity: 0; transform: scale(.94) rotate(-8deg); transition: opacity 1.6s var(--ease-out) .15s, transform 2.4s var(--ease-out) .15s; }
.js .dial.is-ready > svg { opacity: 1; transform: none; }
html.no-motion .dial > svg { opacity: 1; transform: none; transition: none; }

/* ------------------------------------------------------------------ Schmal */
@media (max-width: 980px) {
  .auth__main { grid-template-columns: 1fr; padding-top: 0; gap: 0; }
  .auth__dial { position: fixed; inset: 0 0 auto 0; height: 56svh; z-index: -1; align-items: start; padding-top: 4.5rem; opacity: .55; }
  .dial { width: min(86vw, 44svh); }
  .auth__veil { background: linear-gradient(180deg, rgba(3, 23, 15, .1) 0%, rgba(3, 23, 15, .82) 42%, rgba(3, 23, 15, .96) 70%); }
  .auth__panel { padding-top: 30svh; padding-bottom: 2rem; }
  .auth__foot-mid { display: none; }
  .auth__canvas.is-fallback, .no-js .auth__canvas {
    background: conic-gradient(from 35deg at 50% 28%, #03170f, #0a5a38 12%, #03170f 25%, #06442b 37%, #03170f 50%, #0a5a38 62%, #03170f 75%, #06442b 87%, #03170f);
  }
}
@media (max-width: 480px) {
  .auth__head .pill { font-size: .5625rem; letter-spacing: .1em; padding: .35rem .6rem; }
}