/* Die Anmeldemaske - EIN Blatt für alle Seiten, die eine zeigen.
 *
 * Emil, 09.08.2026: "überarbeite auch den admin login screen und den
 * generellen platform login screen ... kein feature verlust, nur redesign."
 *
 * WARUM EIN EIGENES BLATT: die Maske stand fünfmal im Markup und ihre Regeln
 * einmal, im <style> von account.html. Die vier anderen Seiten hatten
 * abgespeckte Kopien - und genau daher kam, dass vier von fünf weder die
 * Google-Anmeldung noch den Weg zur Registrierung hatten. Handpflege an fünf
 * Stellen führt zuverlässig dazu, dass vier stimmen und eine nicht.
 *
 * WAS SICH ÄNDERT UND WARUM: die alten Regeln benutzten die Marken der
 * Vor-Redesign-Familie (--fs-titel, --line, --ink). Gemessen kam dabei heraus:
 *
 *     Knopf 42,3px hoch, Ecke 8px      Hausmaß: 36px, Ecke 5px, Polster 0 14px
 *     Karte Ecke 26px                  Hausmaß: 12px, Polster 24px
 *     Google-Knopf Ecke 20px           dieselbe Kontur wie alles andere
 *
 * Das Hausmaß ist an /uebersicht gemessen, nicht aus einem Kommentar
 * abgeschrieben - Main hat heute genau damit einen falschen Sollwert
 * weitergegeben (20/16/16 statt gemessener 24/24/24).
 *
 * EIGENE MARKEN MIT RÜCKFALL. Ein Verweis auf eine unbekannte CSS-Variable
 * fällt STILL auf den Vorgabewert zurück - man sieht es nicht als Fehler,
 * sondern als "irgendwie blass". Deshalb bringt dieses Blatt seine Namen
 * selbst mit und leitet sie aus dem ab, was die jeweilige Seite hat.
 */
.anmeldung {
  --an-karte:  var(--karte,  var(--adm-karte, #fff));
  /* Frueher `var(--papier, var(--adm-grund, #f7f6f2))`. Keine der acht
     Seiten, die diese Datei laden, definiert eine der beiden Variablen -
     admin.html hat --adm-grund, laedt diese Datei aber nicht. Die Kette
     loeste also IMMER zum Ersatzwert auf und sah nur nach Stellschraube
     aus.

     DER TON IST ENTSCHIEDEN. Emil am 14.08.2026, auf die Frage, ob dieses
     warme Beige nach der Korrektur am Verlustrechner auch hier weichen
     soll: „das beige kann so bleiben. grade passt". Es ist also kein
     Ueberbleibsel und keine offene Baustelle - wer es aendern will,
     braucht einen neuen Grund. */
  --an-grund:  #f7f6f2;
  --an-linie:  var(--linie,  var(--line, oklch(93.5% 0 155)));
  --an-tinte:  var(--tinte,  var(--ink, #1c2420));
  --an-tinte2: var(--tinte-2, var(--muted, #6b6f68));
  --an-gruen:  var(--gruen,  var(--accent, #2e4f35));
  --an-gruen-tief: var(--gruen-tief, #223c28);
  --an-warn:   var(--stop,   var(--warn, #a8432e));
  --an-still:  var(--still,  var(--surface, #f7f7f7));
}

.anmeldung {
  display: flex; align-items: center; justify-content: center;
  /* 100vh statt 78vh: darunter schaute bei `body.bp-app` der weiche
     Verlauf als harte Querlinie durch die Anmeldemaske - gemessen nach dem
     Schliessen des Kontofensters auf /account (12.08.2026). */
  min-height: 100vh; padding: 1rem;
  /* Transparent: der Seitengrund (Verlauf oder --an-grund am body) bleibt
     eine Flaeche. Eine eigene --an-grund-Box endete genau dort, wo der
     Verlauf weiterging, und erzeugte den Strich. */
  background: transparent; color: var(--an-tinte);
}

.an-karte {
  width: 100%; max-width: 360px;
  background: var(--an-karte);
  border: 1px solid var(--an-linie);
  border-radius: 12px;          /* Hausmaß, gemessen an .panel */
  padding: 24px;                /* Hausmaß, gemessen an .panel */
}

.an-logo { display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; margin-bottom: 20px; }
.an-logo-wort { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* Sieht aus wie eine Ueberschrift, ist aber keine - siehe Kommentar im
   Erzeuger. Die Seite hat ihr <h1> schon in der angemeldeten Ansicht. */
.an-karte .an-titel { font-size: 20px; font-weight: 700; margin: 0 0 4px;
  text-align: center; color: var(--an-tinte); }
.an-karte .an-sub { text-align: center; margin: 0 0 20px;
  font-size: 13px; color: var(--an-tinte2); }

.an-karte label { display: block; font-size: 13px; font-weight: 600;
  margin: 0 0 6px; color: var(--an-tinte); }
.an-feld + label { margin-top: 16px; }

/* KEINE eigenen Feldmasse. Hoehe, Polster und Ecke der Eingabefelder regelt
   das Haus (app-neu.css, teils mit !important) - dagegen anzuschreiben hiesse
   zwei Wahrheiten zu haben, und die !important-Regel gewinnt ohnehin. Hier
   steht nur, was die Maske zusaetzlich braucht. */
.an-karte input { width: 100%; box-sizing: border-box; }

/* Der eine grüne Knopf. Eine Anmeldemaske hat GENAU EINE Aufgabe - anders als
   ein Dashboard, wo Emil ausdrücklich keine hervorgehobene Handlung wollte.
   Der Unterschied ist nicht Willkür: hier gibt es einen einzigen nächsten
   Schritt. */
/* Der Knopf traegt `primary-btn` - Hoehe, Ecke, Farbe und Verhalten kommen
   damit aus dem Haus. Hier nur die Breite und der Abstand, die diese Maske
   braucht. */
.an-karte button.an-los { width: 100%; margin-top: 20px; justify-content: center; }

/* Das Passwortfeld mit Auge. Der Knopf sitzt IM Feld, deshalb rechts Platz. */
.an-pw { position: relative; }
.an-pw input { padding-right: 40px; }
.an-pw .an-auge {
  position: absolute; right: 4px; top: 0; height: 40px; width: 34px;
  border: 0; background: none; cursor: pointer; color: var(--an-tinte2);
  display: flex; align-items: center; justify-content: center;
}
.an-pw .an-auge:hover { color: var(--an-tinte); }
.an-pw .an-auge svg { width: 17px; height: 17px; display: block; }

/* Die Fehlerzeile hat IMMER Platz, auch wenn sie leer ist - sonst springt die
   Karte beim ersten Fehlversuch, und der Knopf wandert unter dem Finger weg. */
.an-status { font-size: 13px; color: var(--an-warn); margin-top: 10px;
  min-height: 1.2em; text-align: center; }
.an-status.an-ok { color: var(--an-gruen); }

.an-oder { display: flex; align-items: center; margin: 20px 0;
  font-size: 12px; color: var(--an-tinte2); }
.an-oder::before, .an-oder::after { content: ""; flex: 1;
  border-bottom: 1px solid var(--an-linie); }
.an-oder::before { margin-right: 0.75em; }
.an-oder::after { margin-left: 0.75em; }

.an-google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 36px; padding: 0 14px;
  border: 1px solid var(--an-linie); border-radius: 5px;
  background: var(--an-karte); color: var(--an-tinte);
  font-size: 14.5px; font-weight: 500; text-decoration: none;
}
.an-google:hover { background: var(--an-still); }
.an-google:focus-visible { outline: 2px solid var(--an-gruen); outline-offset: 2px; }

.an-vergessen { text-align: right; margin: 8px 0 0; font-size: 13px; }
.an-vergessen a { color: var(--an-gruen); font-weight: 600; text-decoration: none; }
.an-vergessen a:hover { text-decoration: underline; }

.an-neu { text-align: center; margin: 16px 0 0; font-size: 13px;
  color: var(--an-tinte2); }
.an-neu a { color: var(--an-gruen); font-weight: 600; }

/* Wie start.html: leiser Fußlink zur Datenschutzerklärung — Pflicht auf
   jeder öffentlichen Seite, nicht nur auf der Registrierung. */
.rechtsfuss { text-align: center; margin-top: 1.4rem; font-size: 12px;
  color: var(--an-tinte2); }
.rechtsfuss a { color: var(--an-tinte2); text-decoration: underline;
  text-underline-offset: 2px; }
.rechtsfuss a:hover { color: var(--an-gruen); }

@media (max-width: 420px) {
.anmeldung { min-height: 100vh; padding: 12px; }
.an-karte { max-width: none; }
}