/* ============================================================
   ANMELDESEITE  (Korrektur 120)
   Eigene Seite statt Maske über der Anwendung. Farben kommen aus
   app.css (--petrol folgt der gewählten Farbwelt).
   ============================================================ */
body.anmeldeseite{ margin:0; background:var(--paper); min-height:100vh }
.am-seite{ display:grid; grid-template-columns:minmax(320px, 42%) 1fr; min-height:100vh }

/* Linke Seite: Marke */
.am-marke{
  background:linear-gradient(160deg, color-mix(in srgb, var(--petrol) 88%, #000 12%) 0%,
                                     color-mix(in srgb, var(--petrol) 55%, #081716 45%) 100%);
  color:#fff; padding:40px 48px; display:flex; flex-direction:column; justify-content:space-between;
}
.am-marke-kopf{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.01em }
.am-punkt{
  width:24px; height:24px; border-radius:3px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px;
}
.am-claim{ font-size:30px; line-height:1.25; font-weight:600; letter-spacing:-.02em; margin:0 0 14px; max-width:15em }
.am-unter{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.78); margin:0; max-width:28em }
.am-marke-fuss{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}

/* Rechte Seite: Karte */
.am-bereich{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; position:relative }
.am-leiste{ position:absolute; top:22px; right:24px }
.am-karte{
  width:min(400px, 100%); box-sizing:border-box; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:28px 28px 24px;
  box-shadow:0 10px 30px rgba(15,30,30,.08);
}
.am-karte h1{ margin:0 0 16px; font-size:21px; letter-spacing:-.01em }
.am-karte .field{ margin-bottom:12px }
.am-karte .field input{ width:100%; box-sizing:border-box; padding:9px 11px; font-size:14px }
.am-karte .btn.wide{ margin-top:4px }
.am-code{ letter-spacing:.35em; font-size:18px !important; text-align:center }
.am-zurueck{ margin-top:8px }
.am-meldung{
  background:var(--petrol-soft); border:1px solid var(--petrol-line);
  color:var(--ink); border-radius:var(--r); padding:9px 11px; font-size:12.5px; margin-bottom:14px;
}
.am-fuss{ font-size:12px; color:var(--muted); margin:18px 0 0; text-align:center; max-width:400px }

@media (max-width: 860px){
  .am-seite{ grid-template-columns:1fr; grid-template-rows:auto 1fr }
  .am-marke{ padding:16px 20px; min-height:0; display:block }
  .am-marke-mitte, .am-marke-fuss{ display:none }
  .am-bereich{ justify-content:flex-start; padding:28px 16px 40px }
  .am-leiste{ position:static; align-self:flex-end; margin-bottom:14px }
}

/* Korrektur 124: "Kennwort vergessen?" und Hinweis auf bestehende Anmeldung */
.am-karte .auth-hint a{ color:var(--petrol); text-decoration:underline; text-underline-offset:2px }
.am-hinweis-sitzung{ background:var(--ochre-soft); border-color:var(--ochre-line) }