/*
 * Lumen Layout - Öffentliche Seiten (Vor-Login: Login, Login/Passwort anfordern,
 * Online-Konto, Fehler-/Statusseiten).
 * Diese Seiten laufen in der normalen App-Shell (Sidebar-Navigation für nicht
 * angemeldete Nutzer bleibt erhalten; die Topbar ist ausgeblendet, solange niemand
 * angemeldet ist). rahmen.sgt setzt am .app-Element die Klasse "guest", solange kein
 * Benutzer angemeldet ist - alle Vor-Login-Stile sind darüber gekapselt und können
 * angemeldete Seiten nicht beeinflussen.
 *
 * Login (oeffentlich/login.sgt) hat eine eigene, fokussierte Karte (.auth-card); die
 * übrigen öffentlichen Seiten werden generisch über .app.guest gestaltet.
 */

/* Schmale, zentrierte Inhaltsspalte für alle öffentlichen Seiten */
.app.guest #main-content {
  max-width: 720px;
  margin-inline: auto;
}

.app.guest .title,
.app.guest #main-content > .container > h1 {
  text-align: center;
}

/* Öffentliche Formulare als Karte (Login-Karte und mehrstufige Passwort-Dialoge
   bringen ihren eigenen Rahmen mit und werden weiter unten ausgenommen) */
.app.guest form:not(.auth-form) {
  margin: 0 0 20px;
  padding: 24px 24px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Feldzeilen: Label über Eingabe, gleichmäßiger Abstand (auch ohne .validate_form) */
.app.guest .formular_zeile {
  margin-bottom: 14px;
}

.app.guest .formular_zeile .control-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
}

.app.guest .buttonleiste,
.app.guest .buttonleiste_passwortanfordern {
  margin-top: 8px;
}

/* Zustimmungs-/Pflichtfeld-Checkboxen */
.app.guest .dseZustimmungDiv,
.app.guest .freiesPflichtfeldZustimmungDiv,
.app.guest .showcleartext {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 0.8125rem;
}

/* Status-/Fehlerseiten: Meldungen mittig in der Spalte */
.app.guest .notLoggedIn,
.app.guest .accessDenied {
  margin: 24px 0;
}

/* ===== Mehrstufige Passwort-Dialoge (Passwort ändern/anfordern) ===== */
/* Schrittliste als verbundene Karten-Sektionen */
.pw-dialog {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-bottom-width: 0;
  background: #fff;
  color: var(--ink-3);
}

.pw-dialog:first-child {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.pw-dialog:last-child {
  border-bottom-width: 1px;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.pw-dialog-head-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 700;
}

.pw-dialog .fa {
  color: var(--ink-3);
}

/* aktueller Schritt hervorgehoben */
.pw-dialog.dialog-active {
  color: var(--ink);
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
}

.pw-dialog.dialog-active .fa {
  color: var(--teal-d);
}

/* Schritt-Inhalt (enthält das Formular) */
.pw-dialog.dialog-body {
  color: var(--ink);
  background: #fff;
}

/* erledigte Schritte: grüner Haken */
.pw-dialog .fa-check-circle {
  color: var(--green-d);
}

/* Formular im aktiven Schritt: kein zweiter Karten-Rahmen (Reset nach der form-Karte) */
.app.guest .pw-dialog form,
.app.guest .pw-dialog form:not(.auth-form) {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Hilfe-/Infospalte neben den Schritten */
.pw-help {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.pw-help ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.pw-help li {
  margin: 4px 0;
}

.reminder_infotext {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.email_censored {
  display: inline-block;
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* Passwort-Anforderungs-Haken: per Default verborgen, project.js blendet sie ein */
.pw-laenge,
.pw-zahl,
.pw-buchstaben,
.pw-sonderzeichen,
.pw-wiederholen {
  visibility: hidden;
  color: var(--green-d);
}


/* Login-Karte, zentriert im Inhaltsbereich */
.auth-card {
  width: 100%;
  max-width: 400px;
  margin: 40px auto;
  padding: 28px 28px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Inhaltsbereich vertikal mittig (moderne Browser); Fallback: oben zentriert via margin */
#main-content:has(> .auth-card) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.auth-title {
  margin: 0 0 20px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field .control-label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
}

/* "Passwort anzeigen" als ruhige Checkbox-Zeile, etwas näher am Passwortfeld */
.auth-showpw {
  margin-top: -6px;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  cursor: pointer;
}

.auth-actions {
  margin-top: 4px;
}

/* Absende-Button über die volle Breite der Karte (.btn-block ist in button.css,
   da es auch außerhalb der oeffentlich-Seiten verwendet wird). */
.auth-actions .btn {
  width: 100%;
}

.auth-links {
  margin-top: 2px;
  text-align: center;
}

.auth-links a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--teal-d);
}

.auth-captcha {
  align-items: center;
}

@media (max-width: 42.5em) {
  .auth-card {
    padding: 22px 18px 20px;
    margin: 24px auto;
  }
}