/* autofokus-login-mobile.css
 *
 * Mobile-Layer NUR fuer die Login-Seite (register/login.php, body.page-login).
 * Auf dem Handy wird die Login-Seite auf das Wesentliche reduziert: das neue
 * Vektor-Logo + das reine Login-Formular. Aller Ballast (Legacy-Kopf mit Menue/
 * Tab-Navigation/Claim-Banner, die Promo-Bloecke "Testkonto"/"Neuanmeldung",
 * der Footer) wird ausgeblendet, damit der Kunde bequem einloggen kann.
 *
 * Desktop bleibt voellig unveraendert (alle Regeln nur im @media + die mobil-
 * exklusiven Elemente tragen inline display:none).
 */

@media (max-width: 900px) {

  /* Letzter Schutz gegen Horizontal-Scroll (Legacy-Festbreiten/Footer drueckten die
     Login-Seite mobil auf ~810px → seitliches Scrollen). Wie body.page-bewertung. */
  body.page-login { overflow-x: hidden !important; }

  /* Kompletter Legacy-Kopf raus: Menue-Login-Leiste, altes Logo, Claim-Banner,
     Tab-Navigation. */
  body.page-login #kopf-autofokus24 { display: none !important; }

  /* Promo-Bloecke (Testkonto/Neuanmeldung) + Footer raus. #fuss-inhalte-autofokus24
     ist ein fix ~810px breiter Legacy-Footer-Container → erzeugte mobil den
     Horizontal-Scroll (Fund 17.06.), wurde hier vorher uebersehen. */
  body.page-login .login-extras { display: none !important; }
  body.page-login #fuss-impressum-autofokus24,
  body.page-login #fuss-inhalte-autofokus24 { display: none !important; }

  /* Redundante Ueberschriften raus — Logo + "Anmelden"-Button sagen genug. */
  body.page-login #anmelden,
  body.page-login h2.hellblau { display: none !important; }

  /* Container entkorseln (Legacy-Festbreiten/Floats) → kein Horizontal-Scroll. */
  body.page-login #container,
  body.page-login #cont-autofokus24,
  body.page-login #inhalte-autofokus24,
  body.page-login #inhalte-dienste {
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
      float: none !important;
      background: none !important;
  }
  body.page-login #inhalte-dienste { padding: 0 18px 24px !important; }

  /* Neues Vektor-Logo oben, gross + zentriert. */
  body.page-login .login-mobile-logo {
      display: block !important;
      text-align: center !important;
      margin: 24px 0 18px !important;
  }
  body.page-login .login-mobile-logo img {
      display: inline-block !important;
      width: 78vw !important;
      max-width: 340px !important;
      height: auto !important;
  }

  /* Formular: Labels auf eigene Zeile, Felder full-width, grosse Tap-Flaeche. */
  body.page-login .formularfelder { width: auto !important; margin: 0 !important; }
  body.page-login .formularfelder p { margin: 12px 0 !important; }
  body.page-login .spanAbstand250,
  body.page-login .spanAbstand245 {
      display: block !important;
      width: auto !important;
      margin: 0 0 5px !important;
      font-weight: bold !important;
  }
  body.page-login input[type="text"],
  body.page-login input[type="password"] {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      font-size: 16px !important;   /* >=16px verhindert iOS-Auto-Zoom beim Fokus */
      padding: 11px !important;
      margin: 0 !important;
  }
  body.page-login input.anmelden {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      font-size: 17px !important;
      font-weight: bold !important;
      padding: 13px !important;
      /* Legacy-formular.css setzt height:34px + line-height:30px — mit groesserem
         Padding/Font wird der Text sonst unten abgeschnitten. Hoehe/Zeilenhoehe
         freigeben, damit der Button auf seinen Inhalt waechst. */
      height: auto !important;
      line-height: normal !important;
      margin: 8px 0 0 !important;
      /* Legacy-Button nutzt ein fix breites Hintergrund-BILD, das bei width:100%
         kachelt (drei Pillen). Mobil durch einen flachen, soliden Button ersetzen. */
      background: #023365 !important;
      background-image: none !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 6px !important;
      cursor: pointer !important;
  }
  body.page-login a.textrot { font-size: 14px !important; }

  /* Klarer Zurueck-Button zur Autobewertung (Jochen 17.06.). Sekundaer-Stil
     (umrandet, heller Fill) — deutlich als "zurueck" erkennbar, aber optisch
     unter dem primaeren Anmelden-Button. */
  body.page-login .login-mobile-back {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 12px !important;
      margin: 10px 0 0 !important;
      font-size: 15px !important;
      font-weight: bold !important;
      color: #023365 !important;
      background: #eff5fc !important;
      border: 1px solid #023365 !important;
      border-radius: 6px !important;
      text-decoration: none !important;
  }

  /* Einziger verbleibender Fuss: kleiner Impressum-Link (Impressumspflicht). */
  body.page-login .login-mobile-impressum {
      display: block !important;
      text-align: center !important;
      margin-top: 26px !important;
      font-size: 12px !important;
      color: #335a80 !important;
      text-decoration: underline !important;
  }
}