/* ============================================================
   Lena · Anmeldeseite
   ============================================================
   Die einzige Seite mit eigener Farbwelt.

   Alles hinter der Anmeldung ist hell und ruhig -- Papierton,
   dunkle Schrift, wenig Farbe. Das ist beabsichtigt: Wer einen
   Vorgang bearbeitet, soll den Inhalt sehen, nicht die
   Oberfläche.

   Die Anmeldung darf anders sein. Sie ist der einzige Ort, an
   dem niemand arbeitet, und der erste Eindruck von Lena.

   ## Warum eine eigene Datei

   Die Regeln hier gelten nur innerhalb von #ansicht-anmeldung.
   So kann keine davon in die Anwendung durchschlagen -- und wer
   das Aussehen der Anmeldung ändert, muss nichts anderes
   prüfen.
   ============================================================ */

#ansicht-anmeldung {
  --dunkel:      #03162e;
  --tuerkis:     #35e8ff;
  --blau:        #2878ff;
  --violett:     #8b43ff;
  --hell:        #f7fbff;
  --gedaempft:   #b8c7dc;
  --linie-blau:  rgba(124, 187, 255, .5);

  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: 1.75rem clamp(1.375rem, 4vw, 4rem);
  overflow: hidden;
  color: var(--hell);
  font-size: 16px;
  background:
    radial-gradient(circle at 17% 22%, rgba(47,125,255,.18), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(45,231,255,.12), transparent 26%),
    radial-gradient(circle at 67% 80%, rgba(124,61,255,.12), transparent 30%),
    linear-gradient(135deg, #021226 0%, #05214b 55%, #03172f 100%);
}

/* Das Raster im Hintergrund: kaum sichtbar, aber es nimmt der
   Fläche die Leere. Nach unten läuft es aus. */
#ansicht-anmeldung::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
}

.anmeldeseite { position: relative; z-index: 2; }

.anmelde-schimmer {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .28;
  pointer-events: none;
}
.anmelde-schimmer--a { width: 20.625rem; height: 20.625rem; left: -7.5rem; top: 36%; background: #0fcfff; }
.anmelde-schimmer--b { width: 22.5rem; height: 22.5rem; right: -10rem; top: 22%; background: #6f49ff; }

/* ---------- Kopfzeile ---------- */
.anmelde-kopf {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 96rem;
  margin: 0 auto 1.875rem;
}
.anmelde-marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.anmelde-marke img { width: 1.9375rem; height: 1.9375rem; }
.anmelde-kopf nav a {
  color: #c8d4e6;
  font-size: .875rem;
  text-decoration: none;
}
.anmelde-kopf nav a:hover { color: #fff; }

/* ---------- Bühne ---------- */
.anmelde-buehne {
  position: relative;
  z-index: 2;
  max-width: 96rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(17rem, .9fr) minmax(27rem, 1.18fr) minmax(15rem, .75fr);
  gap: clamp(1.75rem, 4vw, 4.375rem);
  align-items: center;
  min-height: 40rem;
}

.anmelde-zeichen { display: flex; align-items: center; gap: 1.375rem; margin-bottom: 2.125rem; }
.anmelde-zeichen__bild {
  width: 7.875rem;
  filter: drop-shadow(0 10px 22px rgba(24,222,255,.16));
}
.anmelde-zeichen__name {
  display: block;
  font-size: clamp(2.625rem, 4vw, 4.375rem);
  font-weight: 760;
  line-height: .92;
  letter-spacing: -.02em;
}
.anmelde-zeichen__unter {
  display: block;
  margin-top: .625rem;
  color: #bfd0e5;
  font-size: 1.125rem;
  line-height: 1.45;
}

.anmelde-strich {
  display: block;
  width: 5.75rem;
  height: 4px;
  margin: .25rem 0 1.75rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--violett), var(--tuerkis));
}

#anmelde-schlagzeile {
  margin: 0 0 1.25rem;
  font-size: clamp(3.25rem, 5vw, 5.125rem);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.045em;
}
#anmelde-schlagzeile span {
  background: linear-gradient(90deg, #59a7ff 0%, #2ae2ff 55%, #a772ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.anmelde-vorspann {
  margin: 0;
  color: #cad6e6;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.45;
}

/* ---------- Die Karte ---------- */
.anmelde-karte {
  position: relative;
  width: min(100%, 38rem);
  justify-self: center;
  border: 1px solid rgba(106,180,255,.68);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(17,54,105,.64), rgba(8,26,59,.82));
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
  overflow: hidden;
}
.anmelde-karte__schein {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 0%, rgba(62,226,255,.15), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(137,67,255,.18), transparent 34%);
}
.anmelde-karte__inhalt { position: relative; padding: clamp(1.875rem, 4vw, 3.25rem); }

.anmelde-ueberzeile {
  margin: 0 0 .5rem;
  color: #67dcff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#anmelde-titel {
  margin: 0 0 .375rem;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 750;
  letter-spacing: -.025em;
}
.anmelde-still { margin: 0 0 2rem; color: var(--gedaempft); font-size: 1.125rem; }

#ansicht-anmeldung label {
  display: block;
  margin: 0 0 .5rem;
  color: #c8d8ea;
  font-size: .875rem;
  font-weight: 500;
}

/* Ein Feld mit Symbol links. Der Rahmen liegt am Feld, nicht am
   Eingabefeld -- so sitzt das Symbol innerhalb der Umrandung. */
.anmelde-feld {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.875rem;
  margin-bottom: 1.125rem;
  padding: 0 1rem;
  border: 1px solid var(--linie-blau);
  border-radius: 14px;
  background: rgba(3,24,55,.54);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.anmelde-feld:focus-within {
  border-color: #4fe6ff;
  box-shadow: 0 0 0 4px rgba(56,215,255,.1);
}
.anmelde-feld img { width: 1.5rem; height: 1.5rem; flex: none; opacity: .9; }
.anmelde-feld input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  outline: 0;
}
.anmelde-feld input::placeholder { color: #8396b4; }
/* Safari färbt automatisch ausgefüllte Felder gelb -- auf
   dunklem Grund unlesbar. */
.anmelde-feld input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 60px #0a2144 inset;
}

.anmelde-auge {
  display: grid;
  place-items: center;
  padding: .25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.anmelde-auge img { width: 1.375rem; opacity: .8; }
.anmelde-auge:hover img { opacity: 1; }
.anmelde-auge[aria-pressed="true"] img { opacity: 1; }

.anmelde-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.125rem;
  width: 100%;
  height: 4rem;
  margin-top: .5rem;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(90deg, #1B6FD0, #2264DE 52%, #7A2ED8);
  box-shadow: 0 16px 30px rgba(48,110,255,.22);
  color: #fff;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.anmelde-knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(50,125,255,.3);
}
.anmelde-knopf:active { transform: translateY(0); }

.anmelde-vergessen {
  display: block;
  margin-top: 1.375rem;
  color: #42bcff;
  font-size: .9375rem;
  text-align: center;
  text-decoration: none;
}
.anmelde-vergessen:hover { text-decoration: underline; }

/* Die Fehlermeldung muss auf dunklem Grund lesbar bleiben --
   das Rot aus der Anwendung wäre hier zu dunkel. */
#ansicht-anmeldung .fehler {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(255,138,128,.45);
  border-radius: 12px;
  background: rgba(120,26,20,.35);
  color: #ffc9c4;
  font-size: .9375rem;
  line-height: 1.5;
}

.anmelde-schloss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5625rem;
  margin: 1.75rem 0 0;
  color: #8398b8;
  font-size: .75rem;
}
.anmelde-punkt {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #46ecb3;
  box-shadow: 0 0 0 0 rgba(70,236,179,.45);
  animation: anmelde-puls 2s infinite;
}

/* ---------- Vorteile ---------- */
.anmelde-vorteile {
  position: relative;
  z-index: 2;
  max-width: 96rem;
  margin: .75rem auto 0;
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) minmax(15.625rem, 1.2fr);
  gap: 1.5rem;
  align-items: center;
  border-top: 1px solid rgba(137,183,234,.14);
}
.anmelde-vorteil { display: flex; align-items: center; gap: .875rem; padding: .5rem 1rem; }
.anmelde-vorteil img { width: 2.625rem; height: 2.625rem; flex: none; }
.anmelde-vorteil strong,
.anmelde-vorteil span span { display: block; }
.anmelde-vorteil strong {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.anmelde-vorteil span span { margin-top: .25rem; color: #b2c2d7; font-size: .8125rem; }
.anmelde-spruch {
  color: #c7d5e7;
  font-size: .75rem;
  letter-spacing: .25em;
  line-height: 1.8;
  text-align: right;
}

.anmelde-welle {
  position: absolute;
  z-index: 1;
  left: -3%;
  right: -3%;
  bottom: -2%;
  opacity: .7;
  pointer-events: none;
}
.anmelde-welle img { display: block; width: 100%; height: auto; }

@keyframes anmelde-puls {
  70%  { box-shadow: 0 0 0 10px rgba(70,236,179,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,236,179,0); }
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .anmelde-punkt,
  .anmelde-plaettchen { animation: none; }
  .anmelde-knopf { transition: none; }
}

/* ---------- Schmalere Fenster ---------- */
/* Unter 75 rem wird die dritte Spalte zu schmal -- dann lieber
   ganz weg als gequetscht. */
@media (max-width: 75rem) {
  .anmelde-buehne { grid-template-columns: minmax(17rem, .9fr) minmax(26rem, 1.2fr); }
  .anmelde-spalte { display: none; }
}

@media (max-width: 60rem) {
  .anmelde-buehne { display: block; min-height: auto; }
  .anmelde-vorstellung { margin: 2rem 0 2.25rem; }
  .anmelde-zeichen__bild { width: 5.5rem; }
  .anmelde-zeichen { margin-bottom: 1.625rem; }
  #anmelde-schlagzeile { font-size: 3.375rem; }
  .anmelde-karte { margin: 0 auto; }
  .anmelde-vorteile { grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
  .anmelde-spruch { display: none; }
  .anmelde-welle { bottom: 12%; }
}

@media (max-width: 34rem) {
  #ansicht-anmeldung { padding: 1.25rem; }
  .anmelde-marke span { display: none; }
  .anmelde-zeichen { gap: .875rem; }
  .anmelde-zeichen__bild { width: 4.5rem; }
  .anmelde-zeichen__name { font-size: 2.75rem; }
  .anmelde-zeichen__unter { font-size: .9375rem; }
  #anmelde-schlagzeile { font-size: 2.875rem; }
  .anmelde-karte__inhalt { padding: 1.625rem 1.25rem; }
  #anmelde-titel { font-size: 1.9375rem; }
  .anmelde-vorteile { grid-template-columns: 1fr; }
}

/* ---------- Seitenspalte ---------- */
/* Ein Faden, an dem drei Plättchen hängen. Er zeigt, dass in
   Lena eines aufs andere folgt -- ein Vorgang ist eine Kette,
   kein Stapel. */
.anmelde-spalte { position: relative; min-height: 33rem; }

.anmelde-faden {
  position: absolute;
  left: .625rem;
  top: .25rem;
  width: 8.75rem;
  height: 32.5rem;
  opacity: .92;
}
.anmelde-faden svg { width: 100%; height: 100%; }

.anmelde-plaettchen {
  position: absolute;
  right: 0;
  width: min(100%, 15rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.0625rem 1.1875rem;
  border: 1px solid rgba(80,197,255,.46);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8,45,90,.85), rgba(4,27,57,.84));
  box-shadow: 0 14px 32px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
.anmelde-plaettchen img {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  padding: .625rem;
  border: 1px solid rgba(51,211,255,.35);
  border-radius: 15px;
  background: rgba(38,190,255,.09);
}
.anmelde-plaettchen strong,
.anmelde-plaettchen span span { display: block; }
.anmelde-plaettchen strong {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.anmelde-plaettchen span span {
  margin-top: .25rem;
  color: #b9c9dc;
  font-size: .875rem;
}

.anmelde-plaettchen--1 { top: 3.375rem; }
.anmelde-plaettchen--2 { top: 13.625rem; }
.anmelde-plaettchen--3 { top: 23.875rem; }

/* Ein langsames Schweben, versetzt. Nicht als Schmuck: Es
   nimmt der Seite die Starre, während man auf die Anmeldung
   wartet. */
@keyframes anmelde-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.anmelde-plaettchen { animation: anmelde-schweben 5.5s ease-in-out infinite; }
.anmelde-plaettchen--2 { animation-delay: .5s; }
.anmelde-plaettchen--3 { animation-delay: 1s; }

/* ---------- Einzelne Karte (Passwort zurücksetzen) ---------- */
/* Eine Karte allein, mittig. Kein Aufmacher, keine Seitenspalte
   -- wer hier ist, will eine Sache erledigen. */
.anmelde-buehne--einzeln {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32rem;
}
.anmelde-buehne--einzeln .anmelde-karte { width: min(100%, 30rem); }

/* Die Bestätigung nach dem Absenden. */
.anmelde-bescheid {
  margin-top: 1.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid rgba(70,236,179,.32);
  border-radius: 14px;
  background: rgba(10,60,48,.35);
}
.anmelde-bescheid p { margin: 0; color: #d6ecf5; font-size: .9375rem; line-height: 1.6; }
.anmelde-kleingedruckt {
  margin-top: .75rem !important;
  color: #9db3c8 !important;
  font-size: .84375rem !important;
}