/* ═══════════════════════════════════════════════════════════════════════════
   Anmeldung — der Stil des einen Bauteils (anmeldung.js)
   ═══════════════════════════════════════════════════════════════════════════
   Gilt an beiden Stellen unverändert: als eigene Seite (anmelden.html) und
   als Fenster im Tor der Strecke. Deshalb hängt hier NICHTS an der Umgebung
   — die Karte bringt ihren Grund, ihre Masse und ihre Schrift selbst mit.

   ⚠️ Alle Klassen tragen `an-`. Die `k-`-Klassen der Strecke werden nur dort
   benutzt, wo das Aussehen absichtlich geteilt wird: `.k-oauth` (Apple- und
   Google-Knopf) und `.k-bald` (das Schildchen). Wer sie hier nachbaut, hat
   zwei Wahrheiten für denselben Knopf.
   ══════════════════════════════════════════════════════════════════════════ */

.an-karte{
  position:relative; width:100%; max-width:398px; text-align:center;
  background:var(--k-flaeche,#fff); border-radius:var(--k-r-l,20px);
  padding:34px 30px 30px;
  box-shadow:inset 0 0 0 1px var(--k-linie,rgba(17,17,24,.08)),
    var(--k-schatten,0 1px 2px hsl(250 25% 15% / .05), 0 18px 44px -22px hsl(250 25% 15% / .22));
  /* Die Karte kommt einmal herein. Ein Zugang, der aufpoppt, wirkt wie ein
     Fehler; einer, der sich setzt, wirkt wie eine Tür. */
  animation:an-auf .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes an-auf{from{opacity:0; transform:translateY(10px) scale(.99)}}
@media (prefers-reduced-motion:reduce){.an-karte{animation:none}}

/* Das Markenzeichen — derselbe Pfad wie in Leiste, Favicon und Startseite.
   ⚠️ Wer ihn ändert, ändert ihn an allen vier Stellen. */
.an-zeichen{
  display:block; width:44px; height:44px; margin:0 auto 20px; border-radius:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2345D9FF'/%3E%3Cstop offset='.5' stop-color='%236D4AFF'/%3E%3Cstop offset='1' stop-color='%23FF8A3D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Cpath d='M6 22V12.2l4 5.4 4-5.4V22M19 11v11M26 11v11M19 16.5h7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 2px 6px rgba(109,74,255,.28), 0 8px 22px -6px rgba(255,138,61,.30);
}

.an-karte h2{
  font:600 23px/1.2 var(--k-schrift, 'Instrument Sans', system-ui, sans-serif);
  letter-spacing:-.025em; color:var(--k-tinte,#111118); margin:0 0 7px;
}
.an-unter{
  font-size:14px; line-height:1.5; color:var(--k-tinte-3,#66666F);
  /* ⚠️ 36ch, nicht 32: bei 32 brach „Wir haben Ihnen einen Code geschickt."
     in zwei ungleiche, mittig gesetzte Zeilen — genau das sah schief aus. */
  margin:0 auto; max-width:36ch;
}
.an-unter b{color:var(--k-tinte-2,#4C4C58); font-weight:560}

/* Schliessen und Zurück. ⚠️ Beide sitzen ABSOLUT und dürfen der Überschrift
   nicht in die Zeile laufen — deshalb hat die Karte oben 34px Polster. */
.an-zu,.an-zurueck{
  position:absolute; top:14px; width:30px; height:30px; border:0; padding:0;
  border-radius:50%; background:transparent; cursor:pointer; display:grid;
  place-items:center; color:var(--k-tinte-3,#66666F); font-size:20px; line-height:1;
  transition:background .18s, color .18s;
}
/* ⚠️ HAUSREGEL, hier zum fünften Mal fällig: `[hidden]` ist nur (0,1,0) und
   verliert gegen jede Klassenregel mit `display`. Ohne diese zwei Zeilen
   stand der Zurück-Pfeil auf dem Anlege-Bild, wo es kein Zurück gibt, und
   „Passwort vergessen?" beim Anlegen eines Kontos, das es noch nicht gibt. */
.an-zu[hidden],.an-zurueck[hidden],.an-still[hidden]{display:none}
.an-zu{right:14px}
.an-zurueck{left:14px}
.an-zurueck svg{width:18px; height:18px}
.an-zu:hover,.an-zurueck:hover{background:var(--k-tief,#F4F4F0); color:var(--k-tinte,#111118)}

.an-wege{display:flex; flex-direction:column; gap:10px; margin-top:24px}
/* Das Code-Bild braucht denselben Abstand unter der Überschrift wie das
   Anlege-Bild — sonst klebt das Feld an der Adresse und die Karte wirkt
   gestaucht. */
[data-an="code"]{margin-top:24px}

.an-trenner{
  display:flex; align-items:center; gap:12px; margin:18px 0;
  font-size:12.5px; color:var(--k-tinte-3,#66666F);
}
.an-trenner::before,.an-trenner::after{
  content:''; flex:1; height:1px; background:var(--k-linie,rgba(17,17,24,.08));
}

.an-form{display:flex; flex-direction:column; gap:10px}
.an-form input{
  width:100%; height:46px; padding:0 14px; font-size:15px;
  font-family:inherit; color:var(--k-tinte,#111118);
  background:var(--k-flaeche,#fff); border:0; border-radius:var(--k-r-s,9px);
  box-shadow:inset 0 0 0 1px var(--k-linie-stark,rgba(17,17,24,.15));
  transition:box-shadow .18s;
}
.an-form input::placeholder{color:var(--k-blass,#B9B9C0)}
.an-form input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1.5px var(--k-akzent,#6D4AFF),
    0 0 0 4px var(--k-akzent-hauch,rgba(109,74,255,.08));
}
/* Die Adresse auf eigener Zeile, als Block. ⚠️ `break-all` ist Absicht:
   eine lange Adresse würde die Karte sonst breiter machen als den Rest der
   Anmeldung, und die Karte wackelte beim Wechsel der Bilder. */
.an-adresse{
  display:block; margin-top:10px; font-weight:560; color:var(--k-tinte,#111118);
  font-size:13.5px; word-break:break-all;
}

/* Das Code-Feld. ⚠️ Der Sperrsatz muss auf der RECHTEN Seite ausgeglichen
   werden (`padding-left` in derselben Höhe), sonst schiebt der Abstand hinter
   dem letzten Zeichen die ganze Eingabe sichtbar nach links — genau das sah
   am 01.09.2026 schief aus. Ohne Ziffern im Feld gilt das auch für den
   Platzhalter, deshalb steht dort nur ein kurzes Wort. */
.an-ziffern{
  height:54px; text-align:center; letter-spacing:.44em;
  font-size:22px !important; font-weight:560;
  font-variant-numeric:tabular-nums;
  padding-left:calc(14px + .44em) !important; padding-right:14px !important;
}
.an-ziffern::placeholder{letter-spacing:.06em; font-size:15px; font-weight:400}

.an-knopf{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:46px; margin-top:2px; border:0; cursor:pointer;
  border-radius:var(--k-r-s,9px); font:540 15px/1 inherit;
  color:#fff; background:var(--k-tinte,#111118);
  transition:background .18s, transform .12s;
}
.an-knopf svg{width:18px; height:18px}
.an-knopf:hover:not(:disabled){background:#000}
.an-knopf:active:not(:disabled){transform:translateY(1px)}
.an-knopf:disabled{opacity:.55; cursor:default}

/* Stille Nebenwege: „Passwort vergessen?", „Erneut senden". Sie sind
   erreichbar, aber sie werben nicht. */
.an-still{
  display:block; margin:12px auto 0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; color:var(--k-tinte-3,#66666F);
  text-decoration:underline; text-underline-offset:2px;
}
.an-still:hover:not(:disabled){color:var(--k-tinte,#111118)}
.an-still:disabled{cursor:default; text-decoration:none; opacity:.7}

.an-fuss{
  margin:18px 0 0; font-size:13.5px; color:var(--k-tinte-2,#4C4C58);
}
.an-fuss button{
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-weight:520; color:var(--k-akzent,#6D4AFF); text-decoration:underline;
  text-underline-offset:2px;
}

.an-meldung{
  margin:2px 0 0; font-size:12.5px; line-height:1.45; text-align:left;
  color:var(--k-tinte-3,#66666F);
}
/* ⚠️ Ein Fehler ist rot, eine Zwischenmeldung nicht. „Code wird geprüft …"
   in Alarmfarbe liest sich, als wäre etwas schiefgegangen. */
.an-meldung.schlimm{color:var(--k-akzent,#6D4AFF)}

@media (max-width:520px){
  .an-karte{padding:28px 22px 26px}
}

/* ── Die Karte als Fenster (Tor der Strecke) ──────────────────────────────
   Dieselbe Karte, nur auf einem Schleier statt auf der Seite. `.k-schleier`
   zentriert per Raster; ohne feste Breite schrumpfte die Karte hier auf
   ihren Inhalt, weil `width:100%` gegen eine Spalte rechnet, die selbst
   erst vom Inhalt kommt. */
.k-schleier > #tor-flaeche{width:100%; max-width:398px; display:flex}
/* ⚠️ Auf niedrigen Fenstern (Laptop, Querformat am Telefon) muss die Karte
   rollen können — sonst liegt der Knopf „Weiter mit E-Mail" unter dem
   Bildschirmrand und der Mensch steckt im Tor fest, das sich nicht
   schliessen lässt. */
.k-schleier .an-karte{max-height:calc(100dvh - 40px); overflow-y:auto}