/* Hauptlayout für die zwei Login-Kacheln */
#login-page.auth-layout{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  column-gap: 0px !important; /* halbierter Abstand */
  row-gap: 0;
  align-items: start;
  margin: 0 auto;
  max-width: 1100px;
  padding: 24px 16px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color:#003b78;               /* Systemfarbe für Fließtext */
}

/* Spalten-Grundlagen */
#login-page .login-col{min-width:0;}
#login-page .login-col--left{order:1;}
#login-page .login-col--right{order:2;}

/* Kachel-Optik gemäß 70-plus – linke Kachel */
#login-page .tile{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:10px;
  padding:20px;
  box-shadow:9px 9px 12px rgba(0,0,0,0.25); /* Schatten rechts unten, Distanz 9px, Weichzeichnung 12px */
}

/* Rechte Kachel (Magic-Link) an linke anpassen */
#login-page .dr-login-choice{
  background:#ffffff;
  border-radius:10px;
  box-shadow:9px 9px 12px rgba(0,0,0,0.25);
  border:1px solid #e7e7e7;      /* gleiche Umrandung wie links */
  padding:20px;
  max-width:460px;
  margin:0 auto;
  text-align:left;
}

/* Kachelbreiten angleichen */
#login-page .tile,
#login-page .dr-login-choice{
  max-width:460px;
}

/* Überschrift in rechter Kachel wie links */
#login-page .dr-login-choice h2{
  font-family:Georgia,"Times New Roman",Times,serif !important;
  font-size:25px !important;
  font-weight:600;
  margin:0 0 8px 0 !important;
  color:#003b78 !important;
}

/* Text in rechter Kachel wie links */
#login-page .dr-login-choice p{
  font-family:Georgia,"Times New Roman",Times,serif !important;
  font-size:18px !important;
  line-height:1.5 !important;
  margin:0 0 16px 0 !important;
  color:#003b78 !important;
}

/* Abstand Text -> Button */
#login-page .dr-login-choice form{
  margin-top:8px;
}

/* Header / Text in linker Kachel */
#login-page .tile__header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}
#login-page .tile__header h2{
  font-size:25px;
  line-height:1.2;
  margin:0;
  color:#003b78; /* Systemfarbe */
  font-weight:600;
}
#login-page .tile__icon{
  width:36px;
  height:36px;
  object-fit:contain;
  color:#003b78;
}
#login-page .tile__text{
  margin:8px 0 16px;
  font-size:18px;
}

/* Button-Style (25pt, Rundung, Schatten rechts unten) */
#login-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:25px;              /* einheitliche Schriftgröße */
  line-height:1.2;
  padding:12px 32px;           /* gleiches Innenpadding */
  min-height:64px;             /* erzwingt gleiche Höhe */
  border-radius:10px;
  background:#003b78;
  color:#ffffff;
  box-shadow:9px 9px 12px rgba(0,0,0,0.25);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}

#login-page .btn--primary{background:#003b78;color:#fff;}
#login-page .btn:hover{transform:translateY(-1px);filter:brightness(1.02);}
#login-page .btn:active{transform:translateY(0);box-shadow:3px -6px 8px rgba(0,0,0,0.23);}

/* Responsiv: unter 900px übereinander */
@media (max-width:900px){
  #login-page.auth-layout{
    grid-template-columns:1fr;
    row-gap:24px;
  }
  #login-page .login-col--left{order:1;}
  #login-page .login-col--right{order:2;}
}