/* Natural High · Anmelden und Konto anlegen
   ---------------------------------------------------------------------------
   E-Mail und Passwort, dazu Google. Vorher lief alles ueber Magic Links -
   das hiess: bei jeder Anmeldung eine Mail, und Supabase drosselt bei
   wenigen pro Stunde. Am 20.08. stand die Anmeldung deshalb still.

   Jetzt kommt genau eine Mail, einmal, beim Anlegen des Kontos.          */

.tor{width:100%; display:flex; flex-direction:column; gap:.7rem; margin:0}

/* ---- Die zwei Wege oben ---- */
.tor-waehler{
  display:flex; gap:.3rem; margin:0 0 .3rem;
  padding:.25rem;
  border:1px solid var(--line); border-radius:12px;
  background:var(--bg-2);
}
.tor-waehler button{
  flex:1 1 0; width:auto; margin:0; padding:.5rem .4rem;
  background:none; border:0; border-radius:9px;
  color:#5b6670; font:inherit; font-size:.82rem; cursor:pointer;
  transition:color .35s ease, background .35s ease;
}
.tor-waehler button::before, .tor-waehler button::after{content:none}
.tor-waehler button[aria-selected="true"]{
  background:rgba(255,255,255,.05); color:var(--fg);
}

/* ---- Die Felder ---- */
.tor input[type="email"],
.tor input[type="password"]{
  display:block; width:100%; margin:0; padding:.9rem 1rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  color:var(--fg); font:inherit; font-size:.98rem;
  transition:border-color .4s ease;
}
.tor input::placeholder{color:#454e58}
.tor input:focus{outline:none; border-color:#3a444f}

/* ---- Der Hauptknopf ---- */
/* ---- Der Weg hinein ----
   Chris am 21.08.: "bei der Anmelde-Maske auch den Button wie unten auf der
   Landing."

   Das ist der "Platz sichern"-Knopf unter "Sei dabei." - dieselben zwei
   weichgezeichneten Farbblasen mit 19- und 29-Sekunden-Umlauf (teilerfremd,
   also nie dasselbe Bild). Dort glühen sie beim Scrollen auf; hier stehen
   sie an, denn wer die Maske sieht, ist schon angekommen.

   ⚠️ ZWEI DINGE, die beim Start-Knopf im Atembereich Zeit gekostet haben:
   border:0 statt "1px transparent" - overflow:hidden schneidet am
   PADDING-Rand ab, ein durchsichtiger Rahmen liesse rundherum einen
   Streifen stehen. Und die Verläufe enden auf IHRER EIGENEN Farbe mit
   Deckkraft 0, nicht auf `transparent` - das heisst in CSS durchsichtiges
   SCHWARZ und ergibt mit dem Weichzeichner darüber einen dunklen Saum. */
.tor-los{
  position:relative; isolation:isolate; overflow:hidden;
  display:block; width:100%; margin:.2rem 0 0; padding:1rem;
  border:0; border-radius:14px;
  /* Chris am 21.08.: "Anmelden hat auf einmal wieder so einen lilanen
     Button, nicht den wir unten bei Sei dabei haben."

     Stimmt - ich hatte den hellen Grund vom Start-Knopf im Atembereich
     uebernommen. Dort war er richtig: Der ist der eine Weg auf einem leeren
     Schirm und darf ganz Farbe sein. Hier steht der Knopf im Strom der
     Seite, genau wie "Platz sichern" - und dort ist der Grund dunkel und
     nur das Glimmen kommt durch. */
  background:#12161b; color:#ffffff;
  font:inherit; font-size:1rem; font-weight:400; cursor:pointer;
  text-shadow:0 1px 12px rgba(10,4,24,.6);
  transition:opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.tor-los::before,
.tor-los::after{
  content:''; position:absolute; inset:-60%; z-index:-1;
  filter:blur(22px); opacity:.95; pointer-events:none;
}
.tor-los::before{
  background:
    radial-gradient(38% 60% at 22% 40%, #b18cff 0%, rgba(177,140,255,0) 62%),
    radial-gradient(34% 56% at 74% 62%, #ff8fc8 0%, rgba(255,143,200,0) 62%);
  animation:nh-lava-a 19s ease-in-out infinite;
}
.tor-los::after{
  background:
    radial-gradient(36% 58% at 64% 26%, #7fb6ff 0%, rgba(127,182,255,0) 62%),
    radial-gradient(28% 46% at 34% 78%, #ffdf85 0%, rgba(255,223,133,0) 60%);
  animation:nh-lava-b 29s ease-in-out infinite;
}
@keyframes nh-lava-a{
  0%,100%{transform:translate3d(-6%,-4%,0) scale(1)}
  33%    {transform:translate3d(8%,6%,0) scale(1.18)}
  66%    {transform:translate3d(4%,-7%,0) scale(.92)}
}
@keyframes nh-lava-b{
  0%,100%{transform:translate3d(5%,5%,0) scale(1.08)}
  40%    {transform:translate3d(-8%,-3%,0) scale(.94)}
  75%    {transform:translate3d(-2%,8%,0) scale(1.2)}
}
.tor-los:hover{transform:translateY(-2px)}
.tor-los:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .tor-los::before, .tor-los::after{animation:none}
}
.tor-los::before, .tor-los::after{content:none}
.tor-los:disabled{opacity:.55; cursor:default}

/* ---- Der andere Weg ---- */
.tor-oder{
  display:flex; align-items:center; gap:.8rem;
  margin:.5rem 0 .1rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#3f4750;
}
.tor-oder::before, .tor-oder::after{
  content:''; flex:1 1 auto; height:1px; background:var(--line);
}

.tor-google{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; margin:0; padding:.85rem 1rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  color:var(--fg); font:inherit; font-size:.92rem; cursor:pointer;
  transition:border-color .4s ease;
}
.tor-google::before, .tor-google::after{content:none}
.tor-google:hover{border-color:#3a444f}
.tor-google svg{width:17px; height:17px; flex:0 0 auto}

/* ---- Kleines darunter ---- */
.tor-klein{
  margin:.4rem 0 0; text-align:center;
  font-size:.78rem; color:#5b6670;
}
.tor-klein button{
  background:none; border:0; padding:0; margin:0; width:auto;
  color:var(--fg-dim); font:inherit; font-size:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:#3a444f;
}
.tor-klein button::before, .tor-klein button::after{content:none}
.tor-klein button:hover{color:var(--fg)}

.tor-meldung{
  margin:.2rem 0 0; text-align:center;
  font-size:.82rem; line-height:1.5; color:#5b6670; min-height:1.2em;
}
.tor-meldung.schief{color:#d99a8f}
.tor-meldung.gut{color:var(--fg-dim)}

/* Wer nur ueber Google hereinkommt, sieht kein Passwortfeld - nur den
   Knopf und den Satz, warum. */
.tor-hinweis{
  margin:0 0 .2rem; text-align:center;
  font-size:.9rem; line-height:1.6; color:var(--fg-dim);
}

/* ---- Das Code-Feld beim Ticket ----
   Es steht direkt über dem Knopf und ist leiser als er: eine Möglichkeit,
   keine Aufforderung. Wer keinen Code hat, soll nicht das Gefühl haben,
   ihm fehle etwas. */
.ticket-code{
  width:100%; margin:0 0 .6rem;
}
.ticket-code input{
  display:block; width:100%;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  color:#c3c8cd; font:inherit; font-size:.92rem;
  text-align:center; letter-spacing:.04em;
  transition:border-color .4s ease, background .4s ease, color .4s ease;
}
.ticket-code input::placeholder{ color:#4b545d; letter-spacing:.01em }
.ticket-code input:focus{
  outline:none;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.045);
  color:#ece8e1;
}