/* ── Login Screen ── */
    /* Ein einziges Gap für den ganzen Screen (Titel, Felder, Fehlertext,
       Button-Gruppe) statt mehrerer Sonder-Gaps pro Element-Paar - sonst
       schleichen sich leicht uneinheitliche/fehlende Abstände ein. */
    /* Grid statt Flex+order: Hauptbutton muss in Portrait ZWISCHEN den
       Eingabefeldern (.login-core) und den Sekundär-Links (.login-actions)
       stehen, nicht dahinter (sonst landet er optisch unter "Jetzt
       registrieren" etc., macht keinen Sinn als vorwärtsführender Button).
       Mit reinem Flex+order liessen sich Felder/Sekundär-Links nicht in
       Portrait trennen UND in Landscape als eine gemeinsame rechte Spalte
       zusammenhalten - grid-template-areas kann beides gleichzeitig. */
    #screen-login.screen.active {
      display: flex !important; min-height: 60vh;
      align-items: center; justify-content: center;
      padding: 2rem 1.75rem;
      /* Kein companion-reserve-Padding mehr - Login hat keine Mascot-Figur
         (s. SPONTI_SCREENS in show()), Inhalt zentriert sich frei. */
    }
    #login-form {
      width: 100%; display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: "core" "main" "actions";
      align-items: center; justify-items: center; justify-content: center;
      text-align: center; gap: 1.25rem;
    }
    .login-core { grid-area: core; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
    .login-title   { font-size: 1.2rem; font-weight: 700; margin: 0; }
    .login-sub     { color: var(--muted); font-size: .88rem; margin: 0; }
    .login-input {
      width: 100%; max-width: 280px; background: rgba(255,255,255,.06);
      border: 1px solid var(--line-strong); border-radius: 12px;
      color: var(--text); font-size: .95rem; padding: .75rem 1rem;
      font-family: inherit; outline: none; box-sizing: border-box;
    }
    .login-input:focus { border-color: var(--accent); }
    .login-error { color: var(--red); font-size: .85rem; margin: 0; min-height: 1.2em; }
    /* Gruppe aus Sekundär-Buttons unter dem Haupt-Button (Login, Gast-
       Standort): Breite inkl. Pfeilspitze kommt bereits aus der Basisregel
       (.btn-start-arrow width:calc(100% - 50px)), hier nur der Rahmen für
       die Sekundär-Buttons darunter, damit sie bündig zum Haupt-Button
       stehen. Für Screens mit nur EINEM Button (Invite) wird dieser Wrapper
       NICHT verwendet - da reicht der normale, einzeln zentrierte Button
       wie auf #screen-start/#screen-error. */
    .login-actions { grid-area: actions; width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 1rem; }
    .login-actions .btn-next { width: 100%; }
    .login-main { grid-area: main; width: 100%; max-width: 280px; }
    .login-oauth-row { display: flex; gap: .6rem; }
    .btn-oauth { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
      padding: .55rem .5rem; border: 1px solid rgba(255,255,255,.13); border-radius: 10px;
      background: rgba(255,255,255,.04); color: var(--text); text-decoration: none;
      font-size: .85rem; font-weight: 500; transition: background .15s; }
    .btn-oauth:hover { background: rgba(255,255,255,.09); }
    .btn-oauth svg { flex-shrink: 0; }