/* BEGLAIT Navigator · Anmelden, Passwort, Konto, Einstellungen

   Zwei Lagen in einer Datei. Oben der schlanke Rahmen fuer B1 Anmelden
   und B2 Passwort: wer diese Flaechen sieht, ist noch nicht angemeldet,
   Kopf- und Fusszeile kommen unveraendert aus rahmen.css, neu ist nur
   die mittige Karte. Unten die beiden Flaechen hinter der Anmeldung,
   B3 Konto und B11 Einstellungen, die im Arbeits-Rahmen laufen und
   deshalb kunde.css oder betrieb.css neben sich haben.

   Zentriert ist die Karte, nicht der Text. Die Ueberschrift bleibt unter
   32 px und steht in der Karte links im Satzspiegel, damit daraus kein
   mittiger Held-Block wird (ai-slop-verbot.md, Regel 8).

   Zwei Regeln wie ueberall: keine Farbe als Zahl, nur var(--token), und
   keine Schriftgroesse in px, nur die Stufen aus typography.css. Der
   Umbruchpunkt ist derselbe wie in rahmen.css, 820 px, hier als Literal
   wiederholt, weil CSS eine Custom Property nicht in einer
   Media-Bedingung lesen kann. */

@layer seiten{

  /* ------------------------------------------------ Anmelde-Karte --- */

  .konto-mitte{
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-12) var(--rand-breit) var(--space-16);
  }
  /* 420 px. Breiter faellt eine Zeile Hilfetext auseinander, schmaler
     bricht die Beschriftung neben dem Passwort-Schalter um. */
  .konto-karte{
    inline-size: 100%;
    max-inline-size: 26.25rem;
  }
  .konto-karte__marke{
    margin: 0 0 var(--space-2);
    font-family: var(--type-eyebrow-font);
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-accent);
  }
  .konto-karte__titel{
    margin: 0 0 var(--space-1-5);
    font-size: var(--text-xl);
  }
  .konto-karte__lage{
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-wrap: pretty;
  }
  .konto-karte__fuss{
    margin: var(--space-5) 0 0;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border-hair);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-wrap: pretty;
  }
  .konto-karte__link{
    margin: var(--space-3) 0 var(--space-5);
    font-size: var(--text-sm);
  }
  .konto-karte__link a{ color: var(--text-link); }
  /* Der Hinweiskasten in der Karte braucht Abstand zu den Feldern
     darunter. Er gehoert hierher und nicht an .hinweis: dort traefe er
     auch die Kaesten, die frei im Fliesstext stehen. */
  .konto-karte .hinweis{ margin-block-end: var(--space-5); }
  .konto-karte .eingabefeld + .eingabefeld{ margin-block-start: var(--space-4); }

  /* Der leise Zustandstext unter dem Knopf. Steht immer im Fluss, auch
     leer: sonst springt der Knopf beim Anmelden um eine Zeile hoch. */
  .konto-karte__zustand{
    margin: var(--space-2) 0 0;
    min-block-size: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .anmelde-formular{ margin: 0; }
  .anmelde-fehler{ display: block; }

  /* ------------------------------------------------------ Schritte --- */
  /* Der Weg zu einem neuen Passwort, drei Schritte. Nummern statt
     Aufzaehlungszeichen: die Reihenfolge ist hier die Aussage. Kein
     Kasten drum, die Karte ist schon einer. */
  .konto-schritte{
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3-5);
    counter-reset: schritt;
  }
  .konto-schritte__punkt{
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }
  .konto-schritte__nummer{
    flex: 0 0 auto;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-circle);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-2xs);
    color: var(--text-muted);
  }
  .konto-schritte__text{ min-inline-size: 0; text-wrap: pretty; }

  /* ------------------------------------------------- Konto-Angaben --- */
  /* E-Mail, Rolle, Mandant als Etikett-Wert-Zeilen mit Haarlinie. Kein
     Kasten je Zeile, sonst steht dort ein Kaesten-Teppich (Regel 7). */
  .konto-angaben{
    display: flex;
    flex-direction: column;
    margin: 0;
    max-inline-size: 34rem;
  }
  .konto-angaben__zeile{
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-3-5);
    border-block-end: 1px solid var(--border-hair);
  }
  .konto-angaben__zeile:first-child{ padding-block-start: 0; }
  .konto-angaben__zeile:last-child{ border-block-end: 0; }
  .konto-angaben__label{
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .konto-angaben__wert{
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-md-plus);
    color: var(--text-body);
    overflow-wrap: anywhere;
  }
  .konto-hinweis{
    margin: var(--space-3) 0 0;
    max-inline-size: var(--measure-prose);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    text-wrap: pretty;
  }

  /* ------------------------------------------------ Konto-Formular --- */

  .konto-formular{
    margin: var(--space-4) 0 0;
    max-inline-size: 34rem;
  }
  .konto-formular .eingabefeld + .eingabefeld{ margin-block-start: var(--space-4); }
  .konto-formular__fuss{
    margin-block-start: var(--space-4);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .konto-formular__zustand{
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  /* -------------------------------------------------- Regel-Liste --- */
  /* Was mit den Daten geschieht. Mono-Marke links, Satz rechts. Breit
     nebeneinander, schmal untereinander; die Marke bleibt in beiden
     Faellen die Sprosse, an der das Auge entlanglaeuft. */
  .regel-liste{
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: var(--space-3-5) var(--space-6);
    margin: 0;
    max-inline-size: var(--measure-prose-max);
  }
  .regel-liste__zeile{
    display: contents;
  }
  .regel-liste__marke{
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    padding-block-start: var(--space-1);
  }
  .regel-liste__text{
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-body);
    padding-block-end: var(--space-3-5);
    border-block-end: 1px solid var(--border-hair);
    text-wrap: pretty;
  }
  .regel-liste__zeile:last-child .regel-liste__text{
    border-block-end: 0;
    padding-block-end: 0;
  }

  @media (max-width: 820px){
    .konto-mitte{ padding: var(--space-6) var(--rand-schmal) var(--space-12); }
    .regel-liste{ grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .regel-liste__text{ margin-block-end: var(--space-3); }
  }
}