/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   ANMELDUNG — das Tor: vollflächig, eine Karte, ein Formular, mehr nicht.
   Die Karte ist ein Dialog (.modal) auf deckendem Grund; das Verhalten
   liegt in login-gate.js. Markup siehe dort.

   Zwei Entscheidungen, die man nicht sieht: Das Logo steht auf der Karte,
   weil die Anmeldung die eine Stelle ist, an der ein Werkzeug sagt, von wem
   es ist. Und der Fehler steht IM Dialog über den Feldern (.modal-fehler),
   nicht als schwebende Meldung unten in der Mitte — auf einem Tor, das die
   ganze Fläche füllt, ist das der einzige Ort, an dem man gerade nicht
   hinsieht. */

/* Vollflächig und deckend — hinter dem Tor darf nichts zu sehen sein. */
.anmeldung {
    background: var(--flaeche);
    align-items: center;
}

.anmelde-karte {
    max-width: 380px;   /* Stufe S der Breiten-Leiter (modal.css) */
    box-shadow: var(--schatten-fenster);
}

/* 28 px: Die Karte sitzt bewusst luftiger als ein Arbeits-Dialog, weil auf
   ihr nichts steht außer der Anmeldung. Seitlich 28 auch im Rumpf, damit
   Marke und Formular auf einer Kante stehen. */
.anmelde-kopf {
    padding: 28px 28px 0;
    flex-shrink: 0;
}

/* Der Login baut seinen eigenen Rumpf: Er ist der einzige Dialog ohne Fuß,
   und der Rumpf IST das Formular. `flex: 1` und `min-height: 0` sind keine
   Kosmetik — ohne sie wäre der Inhalt bei kleinem Fenster abgeschnitten und
   der Anmelde-Knopf säße unerreichbar unter der Kante. */
.anmelde-body {
    padding: var(--abstand-24) 28px 28px;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-14);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Die Marke auf der Karte ist dieselbe wie in der Kopfleiste — nur nicht
   klickbar: Dort öffnet sie den Über-Dialog, hier gibt es nichts zu öffnen. */
.anmelde-kopf .marke { pointer-events: none; }

/* Welches Werkzeug — direkt unter dem Logo, das sagt, von wem es ist. */
.anmelde-titel {
    margin: 0;
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
    color: var(--text);
}

/* Die kleine Zeile unter dem Titel — wer sie braucht, nimmt sie. */
.anmelde-untertitel {
    color: var(--text-leise);
    font-size: var(--schrift-xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    margin: -8px 0 0;   /* zieht sie an den Titel heran, gegen den Spalten-Abstand */
}

/* Der Anmelde-Knopf nimmt die volle Breite: Es gibt nichts daneben. */
.anmelde-body .btn-primaer {
    width: 100%;
    text-align: center;
    margin-top: 2px;
    padding: var(--abstand-12) var(--abstand-16);
}

/* Das Tor liegt über allem, auch über Menüs (150) und Sperrfläche (200). */
.anmeldung { z-index: 300; }

/* Das Logo auf der Anmeldekarte. Das Kit färbt es NICHT um: Welche Datei
   in welcher Welt lesbar ist, weiß nur das Werkzeug. Wer ein dunkles Logo
   im Dunkeln weiß braucht, setzt selbst
       .dunkel .logo { filter: brightness(0) invert(1); }
   oder legt zwei Dateien ab. Der Platzhalter des Kits ist grau und geht
   in beiden Welten. */
.logo {
    width: 130px;
    height: auto;
    display: block;
}