/* login.css — die Anmeldung von gooseai.de/login.php.
   KOPIE von Goose Agent/Frontend/src/components/LoginPage.css (die ihrerseits
   aus site.css stammt), damit Website- und App-Anmeldung gleich aussehen.
   Geaendert nur: Schriftpfad (/assets/fonts/), und am Ende ein kleiner
   Grundstock, den in der App App.css liefert. Wer LoginPage.css aendert,
   zieht diese Datei nach -- sonst driften die beiden still auseinander.
   --lg-koernung, --dur-glass, --ease-flex, --dur-press: liquid-glass.css. */

/* LoginPage.css — die Anmeldeflaeche von gooseai.de/login.html, hier mit
   echter Authentifizierung dahinter.
   Uebernommen aus Website/Datei/site.css (Abschnitt LOGIN) und den Tokens
   aus engine/scrollcraft.css + site.css. NICHT nachgebaut, sondern kopiert:
   zwei Anmeldungen, die "gleich aussehen sollen", driften sonst schon beim
   ersten Nachziehen auseinander.
   Die Tokens stehen auf .login, nicht auf :root -- App.css fuehrt ein
   eigenes, vollstaendiges Farbschema (--surface, --content-primary, ...),
   und die beiden duerfen sich nicht ueberschreiben. Nur diese eine Seite
   traegt den Auftritt der Website; hinter dem Login beginnt wieder die App. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;          /* Variable: ein File, alle Schnitte */
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
}

.login {
  /* --- Farbe (site.css :root) --- */
  --sc-canvas:     #ffffff;
  --sc-surface:    #f5f5f7;
  --sc-ink:        #1d1d1f;
  --sc-ink-soft:   #707070;
  --sc-hairline:   #d6d6d6;
  --sc-accent:     #0071e3;
  --sc-accent-ink: #ffffff;
  --sc-accent-hover: #0062c4;
  --sc-link:       #0066cc;
  --sc-ember:      #b64400;

  --sc-font-display: 'SF Pro Display', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sc-font-text:    'SF Pro Text', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --sc-t-xs:  0.875rem;   /* 14  caption */
  --sc-t-sm:  1.0625rem;  /* 17  body-sm */
  --sc-t-2xl: clamp(2.5rem, 1.1rem + 4vw, 3.5rem);  /* 40 -> 56 */

  --sc-track-tight: -0.015em;
  --sc-track-body:  -0.022em;
  --sc-leading-tight: 1.15;
  --sc-leading-body:  1.47;

  --sc-2: 0.5rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-7: 3rem; --sc-8: 4rem;
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --sc-r-md: 10px; --sc-r-pill: 980px;
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--sc-8);
  padding-inline: var(--sc-gutter);
  /* Vier weiche Farbwolken, dieselbe Palette wie in der App -- damit
     die Anmeldung nicht als weisse Tuer vor einer farbigen Wohnung
     steht.

     40 % der App-Staerke, nicht die volle. Gerechnet, nicht geschaetzt:
     auf dieser Seite steht Text DIREKT auf dem Grund, und --sc-ink-soft
     (#707070) traegt auf reinem Weiss nur 4,95:1 -- keine halbe Stufe
     Reserve. Bei voller Staerke fiel die Fusszeile ueber der violetten
     Wolke auf 4,02:1, bei 50 % auf 4,47:1; erst 40 % halten alle vier
     Textfarben (#1d1d1f, #707070, #0066cc, #b64400) ueber 4,5:1, der
     schlechteste Wert ist dann 4,56:1.
     Mehr Farbe ginge nur mit einem dunkleren --sc-ink-soft -- das steht
     aber so in site.css und gilt dort fuer die ganze Website. */
  background:
    var(--lg-koernung),
    radial-gradient(58% 48% at 10% 6%, rgba(34, 211, 238, 0.080), transparent 72%),
    radial-gradient(54% 44% at 90% 3%, rgba(168, 85, 247, 0.068), transparent 72%),
    radial-gradient(66% 52% at 80% 94%, rgba(255, 159, 10, 0.064), transparent 72%),
    radial-gradient(50% 42% at 5% 90%, rgba(59, 130, 246, 0.060), transparent 72%),
    var(--sc-canvas);
  background-size: 140px 140px, auto, auto, auto, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal;
  background-attachment: fixed;
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  line-height: var(--sc-leading-body);
}
.login__inner { width: min(21rem, 100%); }
.login__title {
  margin: 0; text-align: center;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  /* 600, nicht 700: --sc-t-2xl klammert 40 auf 56px, und die Vorlage
     reserviert 700 fuer 80-96px. */
  font-weight: 600;
  line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
}
.login__form { margin-top: var(--sc-7); }

/* ---- Das Feld. Gefuellt, rahmenlos, 10px -- die Vorlage trennt durch
   Flaechenwechsel, nicht durch Striche. KEIN overflow:hidden auf der
   Gruppe: das beschneidet den Fokusring. */
.login__field {
  position: relative;
  background: var(--sc-surface); border-radius: var(--sc-r-md);
}
.login__field + .login__field { margin-top: var(--sc-2); }
.login__field:focus-within {
  outline: 2px solid var(--sc-link); outline-offset: 2px;
}
/* Die drei Ueberschreibungen am Ende sind gegen App.css gerichtet: dort
   traegt `form input` Rahmen, Polsterung und ein margin-top, das hier die
   Flaeche aufreissen wuerde. */
.login__field input {
  width: 100%; height: 56px; margin: 0;
  padding: var(--sc-5) 3.5rem var(--sc-2) var(--sc-5);
  border: 0; background: transparent; color: var(--sc-ink);
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body);
  font-family: inherit;
  border-radius: var(--sc-r-md);
}
.login__field input:focus {                 /* der Ring sitzt auf der Gruppe */
  outline: none; border: 0; box-shadow: none;
}
/* Der eigene Autofill-Anstrich von Chrome wuerde die Flaeche gelb faerben
   und damit die einzige Farbregel der Seite brechen. */
.login__field input:-webkit-autofill,
.login__field input:-webkit-autofill:hover,
.login__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sc-ink);
  -webkit-box-shadow: inset 0 0 0 100px var(--sc-surface);
}

/* ---- Floating Label. Rein deklarativ ueber :placeholder-shown, kein JS.
   Ein Platzhalter als EINZIGE Beschriftung verschwindet beim Tippen und ist
   der bekannte a11y-Fehler; das schwebende Label bleibt stehen.
   --sc-ink-soft auf --sc-surface steht bei 4,55:1 und besteht AA um 0,05 --
   das traegt fuer ein Label, aber nichts darf es weiter ausreizen. */
.login__field label {
  position: absolute; left: var(--sc-5); top: 0.45rem;
  display: block; margin: 0; font-weight: 400;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-body);
  color: var(--sc-ink-soft); pointer-events: none;
  transition: transform 160ms var(--sc-ease-out), font-size 160ms var(--sc-ease-out);
  transform-origin: left top;
}
.login__field input:placeholder-shown:not(:focus) + label {
  font-size: var(--sc-t-sm); transform: translateY(0.75rem);
}
@media (prefers-reduced-motion: reduce) {
  .login__field label { transition: none; }
}

/* ---- Der Pfeil im Feld. GEFUELLT, nicht als blaues Zeichen auf Grau:
   --sc-accent auf --sc-surface misst 4,31:1 und faellt durch AA. Weiss auf
   --sc-accent steht bei 4,70:1.
   32px sichtbar, 44px Trefferflaeche. */
.login__go {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-sm); font-weight: 600; line-height: 1; cursor: pointer;
  transition: background 180ms var(--sc-ease-out), transform var(--dur-glass) var(--ease-flex);
}
.login__go::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.login__go:hover, .login__go:focus-visible { background: var(--sc-accent-hover); }
.login__go:focus-visible { outline: 2px solid var(--sc-link); outline-offset: 2px; }
/* App.css skaliert JEDEN Knopf beim Druck; hier wuerde das den Pfeil aus
   seiner vertikalen Mitte schieben, weil transform schon translateY traegt. */
.login__go:not(:disabled):active { transform: translateY(-50%) scale(0.94); transition-duration: var(--dur-press), var(--dur-press); }
.login__go:disabled { background: var(--sc-ink-soft); color: var(--sc-accent-ink); cursor: progress; }
@media (prefers-reduced-motion: reduce) { .login__go { transition: none; } }

/* ---- Schritt 2: die bestaetigte Kennung steht still darueber. */
.login__who {
  display: flex; align-items: baseline; gap: var(--sc-4); flex-wrap: wrap;
  margin: 0 0 var(--sc-4);
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body);
  color: var(--sc-ink-soft);
}
/* Der Haken steht linksbuendig, nicht mittig wie die uebrigen Hinweise:
   ein Kaestchen mit dreizeiligem Text daneben liest sich zentriert wie ein
   Absatz mit einem Punkt davor. align-items:start haelt es auf der ERSTEN
   Zeile, sonst rutscht es in die Mitte des Satzes. */
.login__agb {
  display: flex; align-items: start; gap: 0.6em;
  margin: var(--sc-5) 0 0; text-align: left;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body);
  color: var(--sc-ink-soft); cursor: pointer;
}
.login__agb input { margin-top: 0.15em; flex: none; }

.login__meta {
  margin: var(--sc-5) 0 0; text-align: center;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body);
}
.login__new {
  margin: var(--sc-8) 0 0; padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline); text-align: center;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body);
  color: var(--sc-ink-soft);
}

/* ---- Die Antwort auf den Druck. Ein Knopf, der aussieht, als ginge er,
   und auf den Druck schweigt, ist die eine Stelle, an der eine Seite sofort
   kaputt wirkt. Hier traegt die Zeile drei Faelle: den Fehler vom Server,
   die Bestaetigung nach der Registrierung und den Hinweis nach "Passwort
   vergessen?". Ember, weil das im Haus die Statusfarbe ist und dies ein
   Status ist. */
.login__antwort {
  margin: var(--sc-4) 0 0; min-height: 1.5em;
  font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-body);
  color: var(--sc-ember);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 200ms var(--feder-smooth, var(--sc-ease-out)), transform var(--dauer-snappy, 200ms) var(--feder-snappy, var(--sc-ease-out));
}
.login__antwort.is-on { opacity: 1; transform: none; }

/* ---- Die Richtung des Zweischritts. Vorwaerts kommt der neue Schritt von
   rechts herein, rueckwaerts von links -- derselbe Pfad hin wie her, sonst
   stimmt die Raumbeziehung nicht, und "Aendern" IST eine Umkehrung.
   Auf der Website macht das ein rAF-Paar in Handarbeit; hier reicht die
   Animation selbst: ein [hidden]-Schritt steht auf display:none, und von
   dort zurueck startet jede CSS-Animation neu. Kein Zustand, kein Timer. */
.login__form [data-step]:not([hidden]) {
  /* Auf der Feder der App (snappy), wie jeder andere Wechsel dort. */
  animation: login-schritt-vor var(--dauer-snappy, 200ms) var(--feder-snappy, var(--sc-ease-out)) both;
}
.login__form.is-back [data-step]:not([hidden]) {
  animation-name: login-schritt-zurueck;
}
@keyframes login-schritt-vor    { from { opacity: 0; transform: translateX(12px); } }
@keyframes login-schritt-zurueck { from { opacity: 0; transform: translateX(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .login__antwort { transition: opacity 200ms var(--sc-ease-out); transform: none; }
  @keyframes login-schritt-vor     { from { opacity: 0; } }
  @keyframes login-schritt-zurueck { from { opacity: 0; } }
}

/* .tlink als Button: eine Handlung auf der Seite ist kein Link. Der
   Vorleser sagt sonst "Link Aendern", und es gibt kein Ziel. */
.login .tlink {
  color: var(--sc-link); text-decoration: none;
  font-size: inherit; font-weight: 400; font-family: inherit;
  transition: color 180ms var(--sc-ease-out);
}
.login .tlink:hover, .login .tlink:focus-visible {
  text-decoration: underline; text-underline-offset: 3px; color: var(--sc-link);
}
.login .tlink .cta-arrow { display: inline-block; transition: transform var(--dauer-snappy, 180ms) var(--feder-snappy, var(--sc-ease-out)); }
.login .tlink:hover .cta-arrow { transform: translateX(3px); }
.login button.tlink { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
.login button.tlink:not(:disabled):active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .login .tlink, .login .tlink .cta-arrow { transition: none; }
}

.login__legal {
  margin: var(--sc-8) 0 0;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  display: flex; gap: var(--sc-4); flex-wrap: wrap; justify-content: center;
}
.login__legal a { color: var(--sc-ink-soft); text-decoration: none; text-underline-offset: 2px; }
.login__legal a:hover, .login__legal a:focus-visible { text-decoration: underline; color: var(--sc-ink); }

/* Ein Link, der allein auf einer Zeile steht, ist eine Handlung und keine
   Stelle im Fliesstext -- gemessen waren es 20px hohe Ziele. */
@media (pointer: coarse) {
  .login__meta .tlink, .login__new .tlink, .login__legal a { position: relative; }
  .login__meta .tlink::after, .login__new .tlink::after, .login__legal a::after {
    content: ""; position: absolute; inset: 50% 0 auto 0;
    height: 44px; transform: translateY(-50%);
  }
}

/* ---- Grundstock, den in der App App.css traegt. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.login a.tlink { cursor: pointer; }